CODEWITHSUNDEEP
javascriptjqueryhtmltwitter-bootstrap-3bootstrap-modal
Rahbee Alvee
Rahbee Alvee

Reputation: 1994

Multiple Bootstrap modals in a single page

In a page, there are around 150 submenus (expandable). Every click on a submenu opens a modal with specific information for the submenu. Data is fetched initially when the page loads. I wonder what is a better way to implement the modals.

Should I write 150 modals in the same page, or write one modal then create the content dynamically?

For the latter option I need an example.

Technologies used: Bootstrap, HTML, CSS, jQuery.

Upvotes: 7

Views: 18754

Answers (4)

Punit Gajjar
Punit Gajjar

Reputation: 4997

You might like this example i have created, Let me know if you dont understand any where.

$(document).ready(function(e) {
    // Initializing our modal.
    $('#myModal').modal({
        backdrop: 'static',
        keyboard: false,
        show: false,
    });

    $(document).on("click", ".modalButton", function() {

        var ClickedButton = $(this).data("name");

        // You can make an ajax call here if you want. 
        // Get the data and append it to a modal body.


        $(".modal-body").html("<p>" + ClickedButton + "</p> <p>Some text in the modal.</p> ");
        $('#myModal').modal('show');
    });

});
<!DOCTYPE html>
<html lang="en">
   <head>
      <title>Bootstrap Example</title>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
      <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
   </head>
   <body>
      <div class="container">
         <h2>Modal Example</h2>
         <!-- Trigger the modal with a button -->
         <button type="button" class="btn btn-info btn-lg modalButton" data-name="Clicked Modal 1" data-toggle="modal">Open Modal 1</button>
         <!-- Trigger the modal with a button -->
         <button type="button" class="btn btn-info btn-lg modalButton" data-name="Clicked Modal 2" data-toggle="modal">Open Modal 2</button>
         <!-- Trigger the modal with a button -->
         <button type="button" class="btn btn-info btn-lg modalButton" data-name="Clicked Modal 3" data-toggle="modal" >Open Modal 3</button>
         <!-- Trigger the modal with a button -->
         <button type="button" class="btn btn-info btn-lg modalButton" data-name="Clicked Modal 4" data-toggle="modal">Open Modal 4</button>
         <!-- Trigger the modal with a button -->
         <button type="button" class="btn btn-info btn-lg modalButton" data-name="Clicked Modal 5" data-toggle="modal">Open Modal 5</button>
         <!-- 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">Modal Header</h4>
                  </div>
                  <div class="modal-body">
                     <p>Some text in the modal.</p>
                  </div>
                  <div class="modal-footer">
                     <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                  </div>
               </div>
            </div>
         </div>
      </div>

You can just create a single modal. and as you have mentioned you will have 150 menu so you can give them a common class name and using a jquery get the click event of those button/menu. You can have some ajax call to get some dynamic data if you want. append your response to the modal body and just show the modal. Thats it!!

Upvotes: 13

Alan
Alan

Reputation: 257

Load the data dynamically using jQuery. I'm assuming you have buttons to open each modal?

http://jsfiddle.net/h3WDq/

$('#myModal1').on('show.bs.modal', function (event) {
var button = $(event.relatedTarget) // Button that triggered the modal
// Extract info from data-* attributes
// If necessary, you could initiate an AJAX request here (and then do the updating in a callback).
// Update the modal's content. I'm using use jQuery here, you could use it to load your data
var modal = $(this)
modal.append("<p>Test</p>");
})

Upvotes: 0

kapantzak
kapantzak

Reputation: 11750

You can write one modal in your page. Then, every time you click a submenu, call an asynchronous function to get the appropriate data, append them to the modal and show it:

jQuery

$(document).on('click', '.submenu', function() {
   $.ajax({
      url: 'path/to/file',
      method: 'POST',
      data: { ... },
      success: function(data) {
        // Get the data and fill the modal
        // Show modal
        $('#myModal').modal('show');
      },
      error: function() {
        // Error handling
      } 
   });
});

Upvotes: 3

Robert
Robert

Reputation: 1286

Of course you should write one modal and generate content on demand. If you will go with the first option then every time you will need to make a change in the common area you will have to change +150 files! That's very bad approach.

You need to remember that web application should be consistent. This way you will save yourself a lot of time and effort.

Also, how do you plan to pull it off. Load 150 modal windows at once and than wait for data ?:P

The way I see it - create one modal that will be a framework and then fill it with data, maybe add stuff if you need it in other template file for specific case.

Cheers!

Upvotes: 1

Related Questions