这是第一个模态的代码;接下来的两个模态中的所有变化都是内部的图像链接,但只有这些显示出来.
<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>
解决方法
每个模态应该被赋予不同的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> ...
这样,如果单击第一个链接,它应弹出第一个模态,如果单击第二个模式,则会弹出第二个模态.