Question

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

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

Answer 1

每个模式应为不同的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>
...

这样，如果你点击第一个链接，它应弹出第一个模态，如果你点击第二个模式 - 弹出第二个模态。

Answer 2

Bootstrap代码中存在错误。我也遇到同样的问题，两个模式的ID不同，但只有第一个模式启动。当我从index.html中删除第一个模态时，第二个模态结构就会生效。

我使用的解决方法是使函子附加到主体，然后传递给两个函式之间的差异以动态填充。然后在需要模态时调用函数。

即

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

我在页面上有两个模态，（我正在使用bootstrap）;点击任何模态只会打开第一个模态。我不懂js;有没有HTML修复？

2 个答案: