I've two modals on a page, (i'm using boot

问题:

This is the code for the first modal; all that changes in the next two modals is the image links inside, but only these show up.

<div id="modallinkleft">
  <a href="#myModal" data-toggle="modal">
  <img src="mylinks/cp/117s.jpg">
  <img src="mylinks/cp/23s.jpg">
  <img src="mylinks/cp/08s.jpg">
  </a>
  <div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-body">
      <img src="mylinks/cp/117.jpg">
      <img src="mylinks/cp/23.jpg">
      <img src="mylinks/cp/08.jpg">
    </div>
    <div class="modal-footer">
      <button class="btn" data-dismiss="modal" aria-hidden="true">x</button>
    </div>
  </div>
</div>

回答1:

Each modal should be given a different id and each link should be targeted to a different modal id. So it should be something like that:

<a href="#myModal" data-toggle="modal">
...
<div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"></div>
...
<a href="#myModal2" data-toggle="modal">
...
<div id="myModal2" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"></div>
...

In this way, if you click the first link, it should pop-up the first modal and if you click the second - the second modal is popped up.

回答2:

There's a bug in the Bootstrap code. I am also having the same issue and my ids for the two modal are different, yet only the first one is launched. When I remove the first one from index.html, then the second modal structure comes alive.

The workaround I used is make a function that appends the modal to the body and then pass into the difference between the two modals to be filled in dynamically. Then call function whenever you need the modal.

i.e

 function appendModuleToBody(title){      
        $('#myModal1').remove(); // remove previously appended ones if needed
        $('#myModal2').remove();
        $( "body" ).append( ` -- modal html here -- ` }