Generating various pop-up windows upon clicking a button in Bootstrap

Once the user clicks on a button, I aim to have a pop-up window appear. I've managed to do this successfully, but the issue arises when the same text is displayed for all button clicks.

<button type="button" class="w3-btn w3-theme-d1 w3-margin-bottom" data-toggle="modal" data-target="#moreinfo"><i class="fa fa-thumbs-up"></i>  Find out more</button>

    <div id="moreinfo" class="modal fade" role="dialog">

        <div class="modal dialog">

            <div class="modal-content">

                <div class="modal-header">
                fdssdsdffsgffdgdf
                </div><!--end of modal header-->

                <div class="modal-body">
                fds
                </div><!--end of modal content-->

            </div><!--end of modal content-->

        </div><!--end of modal dialog-->

    </div><!--end of more info div-->

The code above showcases my design, with identical styles applied to each popup window. However, my goal is to personalize the text within each one. Assistance would be greatly appreciated!

htmlcsstwitter-bootstrap

Answer №1

Experiment with various modal examples

<div class="container">
  <h2>Modal Showcase</h2>
  <!-- Trigger the first modal with a button -->
  <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>
  <!-- Trigger the second modal with a button -->
  <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal1">Open Modal</button>
  <!-- The First Modal-->
  <div class="modal fade" id="myModal" role="dialog">
    <div class="modal-dialog">

      <!-- Modal content-->
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal">&times;</button>
          <h4 class="modal-title">First Modal Header</h4>
        </div>
        <div class="modal-body">
          <p>Some text in the first modal.</p>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        </div>
      </div>

    </div>
  </div> <!--End of First Modal-->
  <!-- The Second Modal-->
  <div class="modal fade" id="myModal1" role="dialog">
    <div class="modal-dialog">

      <!-- Modal content-->
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal">&times;</button>
          <h4 class="modal-title">Second Modal Header</h4>
        </div>
        <div class="modal-body">
          <p>Some text in the second modal.</p>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Close 1</button>
        </div>
      </div>

    </div>
  </div>
  <!--End of Second Modal-->
</div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The image tag fails to appear on the browser when the client attempts to access it

Greetings, I am new to web development. I am attempting to create a simple static website that only displays an image in the header tag of an HTML file. The server seems to be working correctly in sending responses to the client, but the problem lies in t ...

javascripthtmlnode.js

Display tooltip upon hovering

Can someone help me with my dot navigation tooltips? I've managed to make them visible, but now I want them to only appear on hover. What am I missing? I've experimented with display: none and visibility but when I tried this code: span.tooltip ...

htmlcss

When attempting to check and uncheck checkboxes with a specific class, the process fails after the first uncheck

I have a set of checkboxes and one is designated as "all." When this box is clicked, I want to automatically select all the other checkboxes in the same group. If the "all" box is clicked again, I would like to deselect all the other checkboxes. Currently ...

javascriptjqueryhtmlcheckbox

Switch over to using a for loop

I have a query regarding implementing multiple toggles within a for loop. For instance, I want a toggle menu to appear when clicking on a div. Here is the code snippet: for (var i = 0; i < myObjectString.length; i++) { var obj = JSON.parse(myObjectStr ...

javascriptjqueryhtmlcssjson

Express.js - display the complete information

Trying to display an array of objects (highcharts points) is giving me some trouble. Instead of the actual data, I'm seeing [object Object]. It seems that JSON.stringify() doesn't play well with HTML. util.inspect also doesn't work as expe ...

javascripthtmlnode.jsexpress

Discover the height of the card for alterations

I have been working on customizing a template from startbootstr app. The original code looks like this: <div class="row"> <div class="col-md-4 mb-5"> <div class="card h-100"> <img class="card-img-top" src="ht ...

csstwitter-bootstrap

Utilizing "beneath the scroll" on a bootstrap 5.1 webpage

I have a website built with Bootstrap and I am looking to implement a "below the flow" positioning for the footer, preferably using CSS. I have been referring to it as "below the fold," although I'm not sure if that is the correct terminology to use. ...

htmlcssbootstrap-5

Error occurred while trying to access a file within the server using $_GET method

Struggling to access a URL within my folder, but encountering an error. I have attempted using file_get_contents without success. Warning: include(/home/vol2_3/*****/*****/htdocs/new/td.php?r=8&ids=309834): failed to open stream: No such file or direct ...

javascriptphphtmlfileinclude

Connecting event logic to Bootstrap 5 dropdown clicks: A quick guide

Is there a way to add an "onclick" event to a Bootstrap 5 dropdown in order to execute application logic based on the selected dropdown item? The Bootstrap docs cover events for when the dropdown is opened and closed, but there doesn't seem to be a s ...

javascriptjquerytwitter-bootstrapbootstrap-5

Achieving the perfect alignment: Centering a paragraph containing an image using JQuery

I need help centering the background image of my <p> tag on the webpage. Script $(function() { $('ul.nav a').bind('click', function(event) { var $anchor = $(this); $('html, body').stop().animate({ ...

javascriptjqueryhtmlcss

The amazingly efficient Chrome quick find feature, accessible by pressing the powerful combination of Ctrl + F, ingeniously

Currently using Google Chrome version 29.0.1547.62 m. I've employed the CSS attribute overflow set to hidden on the parent element, which renders some of my DIV elements hidden from view. Additionally, these concealed DIV elements are adjusted in pos ...

javascripthtmlcssgoogle-chrome

Tips for adjusting breakpoints in the SCSS of Vuetify version 2?

I am currently using scss files and I want to adjust the breakpoints within the css code in vuetify version 2. Unfortunately, I have not been able to locate any information regarding this in the vuetify upgrade guide. In the previous version 1.5, I utili ...

cssvue.jssassvuetify.js

Alter the hue of the div

Having trouble with this code snippet: function red(opt) { var sqr; sqr="r"+parseInt(opt); hilight_css = {"background-color":"#f00"}; $(#sqr).css(hilight_css); } I am calling the function like so: red(questions); The variable question ...

javascriptjquerycss

Using CSS absolute/relative positioning in a flyout menu: Utilizing specific parent properties (such as left, top, width, vertical/horizontal alignment) while disregarding others

I recently encountered a common issue in CSS involving flyout menus with sub-menus that are shown on hover. When attempting to position the sub-menu directly below the parent list item, I used position:relative; on the parent item and position:absolute;top ...

htmlcssalignmentcss-position

Retrieve and update data on-the-fly using XMLHttpRequest from an external API

I am currently dealing with a Web App that refreshes every 5 seconds using a meta tag in HTML. It connects to a web service each time the page is refreshed to display the JSON results. However, I now require this process to occur only when there is a new v ...

javascripthtmlajaxjsonxmlhttprequest

Expanding a website banner slide to fill the entire width of the page

Is there a way to ensure that the banner images in the website below flow seamlessly? Currently, it seems like the current image is cut off on the left and part of the previous image shows up in its place. I'd like the current image to occupy the ent ...

javascripthtmlcssajaxtemplates

Ways to adjust text color after clicking on an element

Just a heads up, I didn't write all of the web-page code so I'm not exactly sure what pdiv is. But I want to see if I can fix this small issue [making text color change when clicked on to show which section you're reading]. This particular ...

javascriptjqueryhtmlcss

The dynamic table is too large for the bootstrap card

My issue involves datatables within bootstrap cards. When the table exceeds the height of the card, it extends outside the boundaries. Even with overflow: auto on a table-wrapper in place, the scroll does not trigger when exceeding the card's height. ...

htmlcssbootstrap-4

The selection form does not display a preview of the options

I recently discovered that the CSS I added is causing the preview of select options in my form to disappear. Despite searching online, I have been unable to find a solution to this issue. Here is the problematic CSS code: .form-control{ height: 50px; ...

htmlcssdjangocss-selectors

Presenting two arrays simultaneously creates angular duplicates

Encountering an issue while trying to display two arrays containing channel information: List of channels List of subscriptions that users have opted for. channels = [ { "id": 1, "name": "arte", "service&q ...

htmlangular