9

这是第一个模态的代码；接下来的两个模态中的所有变化都是内部的图像链接，但只有这些显示出来。

<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>
4

2 回答 2

10

每个模态应该被赋予一个不同的 id并且每个链接应该被定位到一个不同的模态 id。所以它应该是这样的：

<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>
...

这样，如果您单击第一个链接，它应该会弹出第一个模式，如果您单击第二个 - 会弹出第二个模式。

于 2013-05-11T06:02:45.997 回答
2

Bootstrap 代码中有一个错误。我也有同样的问题，我的两种模式的 id 不同，但只有第一个被启动。当我从 index.html 中删除第一个时，第二个模态结构就会活跃起来。

我使用的解决方法是创建一个函数，将模态附加到正文，然后将两个模态之间的差异传递给动态填充。然后在需要模态时​​调用函数。

IE

 function appendModuleToBody(title){      
        $('#myModal1').remove(); // remove previously appended ones if needed
        $('#myModal2').remove();
        $( "body" ).append( ` -- modal html here -- ` }
于 2018-09-25T21:20:33.547 回答