Using multiple modal dialogs in one page

Question

I have a page where I need to click on links on right hand side and left hand side, and display modal dialogs. I am seeing on bootstrap\'s site that the code for each modal

Answer 1

That depends on how you want to load your dialogs' content.

If you want them inline, yes, you have to put all the html in the main page. So when user click the link, the content is already there and can be rendered immediately.

If you want them loaded only when someone clicked the link, you can use iframe inside the modal, or use ajax to load the partial content. check remote section in the modal documentation.

Or, if you want inline modal but your modals have slightly different content, you can check this http://getbootstrap.com/javascript/#modals-related-target

Answer 2

To expand on the answer that Phoenix gave, inline means do you want the content to be loaded when the page loads and be readily accessable. So yo would put all of the 10 modals on the page so when the page loads the content would be already there and then you would just link to each modal individually.

So you would put 10 buttons or links whatever you choose and put the data-target attribute to the corresponding modal like the following:

<!-- Trigger the modal with a button -->
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>

And then you would put 10 modals with different ID's like the following.

<!-- Modal -->
<div id="myModal" class="modal fade" 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>

This would be the best if you want search engines to index the content of the modals and if you want the modals to be readily accessable and load quickly.

Or you can just put one modal on the page and load all of your content remotely though ajax.

So your link would look like

<a data-toggle="modal" href="Path/To/Code/Snippet" data-remote="Path/To/Code/Snippet" data-target="#myModal">Modal</a>

And you would just put one of the modals on the page and load all of your content through that modal. Your html snippets you can name like myhtmlsnippet.php and put that in the href and data-remote attributes. Then just the html snippets will be loaded into the modal-body of the one modal.

Then you should add the following script so that each time the modal closes it clears the content from the modal.

<script>
$(document).on('hidden.bs.modal', function (e) {
    var target = $(e.target);
    target.removeData('bs.modal')
    .find(".modal-body").html('');
});
</script>

This is good for things like videos and such. If you have 10 different videos that you want to load then it will take an excessive amout of time for your page to load. But search engines will not associate this remotely loaded content with the page your links are on they will search them individually and since then are just code snippets you will want to use robots.txt to have them not index these snippets.

You can also make full html pages and just load one div from that page into your modal dynamically. This is better for seo and you dont have to exclude the content with robots.txt. Below is a full html page with a working example. These will obviously not work unless you are working on a server as ajax is loaded by the server but you can copy and paste them to see them work. Also you will want to restructure the modal like I did below and restyle it like I have below as bootstraps remote loading of its modals loads into the modal content. I have also added the class clearable-content to the modal-content and changed the jquery script so if you have other modals on the page it will not clear their content just the dynamically loaded content. Here is a working example.

<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<style>
.modal-title {
  text-align:center;
  font-size:20px;
  font-weight:bold;
}
@media screen and (min-width: 768px){
  #myModal .modal-dialog {
    webkit-box-shadow: 0 5px 15px rgba(0,0,0,.5);
    box-shadow: 0 5px 15px rgba(0,0,0,.5);
  }
}
#myModal .modal-header {
  border-radius: 5px 5px 0 0;
  background-color:#fff;
}
#myModal .modal-content {
  background-color:#fff;
  border-radius: 0;
  padding:20px;
  box-shadow: none;
  background-clip:inherit;
}
#myModal .modal-footer {
  background-color:#fff;
  border-radius: 0 0 5px 5px;
}
</style>
</head>
<body>

<!-- Modal -->
<div id="myModal" class="modal fade" role="dialog">
     <div class="modal-dialog">
          <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal">&times;</button>
          <p class="modal-title">My Dynamic Modal</p>
      </div>
      <!-- Modal content-->
      <div class="modal-content clearable-content">
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
  </div>
</div>


<a data-toggle="modal" href="2.html" data-remote="1.html #modal-section" data-target="#myModal">Page 1 Modal Content</a>
<br /><br />
<a data-toggle="modal" href="3.html" data-remote="2.html #modal-section" data-target="#myModal">Page 2 Modal Content</a>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script>
$(document).on('hidden.bs.modal', function (e) {
    var target = $(e.target);
    target.removeData('bs.modal')
    .find(".clearable-content").html('');
});
</script>
</body>
</html>

Then you would make another html page like the one below I have named it 1.html in the links above but you can name it anything and just change it in your links in your main page.

<!DOCTYPE html>
<html lang="en">
<head>

</head>
<body>
      <p>Some Other Page Content</p>
      <div id="modal-section">
           My modal content
      </div>
</body>
</html>

This method is a little better for seo then creating snippets and if a search engine indexes your site they can index your modals content and when people link to it there will be a full page for them to see. They still will not associate your modals content with the original page but they will follow the link and index the pages individually.

I hope this clears everything up for you.