我在页面上有两个模态,(我正在使用bootstrap);点击任何模态只会

发布时间：2020-12-18 00:25:10 所属栏目：安全来源：网络整理

导读：这是第一个模态的代码;接下来的两个模态中的所有变化都是内部的图像链接,但只有这些显示出来. 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="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>
...

这样,如果单击第一个链接,它应弹出第一个模态,如果单击第二个模式,则会弹出第二个模态.

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!