我在一个页面上有两个模式,(我正在使用引导程序);单击任何模式只会打开第一个.我不懂js;有html修复吗?

2022-01-17 00:00:00 modal-dialog html twitter-bootstrap

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

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>

推荐答案

每个modal应该被赋予一个不同的id并且每个链接应该定位到不同的模态 ID.所以应该是这样的:

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.

相关文章