我在一个页面上有两个模态（我正在使用引导程序）；单击任何模态只会打开第一个。我不懂js；有 html 修复吗？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16494227/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
I've two modals on a page, (i'm using bootstrap); clicking on any modal opens only the first. I don't understand js; is there an html fix?
提问by kartik
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>
回答by graumanoz
Each modalshould be given a different idand each linkshould be targeted to a different modal id. So it should be something like that:
每个模态应该被赋予不同的 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>
...
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.
这样，如果你点击第一个链接，它应该弹出第一个模态，如果你点击第二个 - 弹出第二个模态。
回答by Eli
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.
Bootstrap 代码中有一个错误。我也有同样的问题，我的两个模态的 id 不同，但只有第一个被启动。当我从 index.html 中删除第一个时，第二个模态结构就会活跃起来。
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
IE
function appendModuleToBody(title){
$('#myModal1').remove(); // remove previously appended ones if needed
$('#myModal2').remove();
$( "body" ).append( ` -- modal html here -- ` }
