Question

我想在Bootstrap中使用模态功能来显示图像。

我有4个不同的图像，当我打开它并且出现模态后，我注意到在我的第二张图像之后，它也会打开第一张图像。

有没有办法一次只打开一个模态而不是页面上的每个模式？

这里是我正在使用的代码（我已经尝试将它们放在分开的容器中，因为我已经阅读了作品，但仍然没有运气）

<div id="gallerydrawings">
<h2 class="text-plan">Plans</h2>
 <ul>
  <li>
   <img class="modalimg" data-toggle="modal" height="60" width="120" data-target=".bs-example-modal-lg" src="images/smestowff3d.png" title="Smestow First Floor Plan" style="cursor:pointer">
   <div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
   <div class="modal-dialog modal-lg">
    <div class="modal-content">
     <div class="modal-header">
      <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
          <h4 class="modal-title" id="myLargeModalLabel">Smestow High School | First floor plan</h4>
        </div>
    <div class="modal-body">
<img src="images/smestowff3d.png" class="modalimg" style="height: auto; max-width:100%; float:center;">
    </div>
  </div>
</div>
</div>
</li>

<li>
<img class="modalimg" data-toggle="modal" height="60" width="120" data-target=".bs-example-modal-lg" src="images/smestowfflayout.png" title="Smestow First Floow Plan" style="cursor:pointer">
<div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">X</span><span class="sr-only">Close</span></button>
          <h4 class="modal-title" id="myLargeModalLabel">Smestow High School | First floor plan</h4>
        </div>
    <div class="modal-body">
<img src="images/smestowfflayout.png" class="modalimg" style="height: auto; max-width:100%; float:center;">
    </div>
  </div>
</div>
</div>
</li>
</ul>
</div>

Answer 1

尝试使用不同的id用于不同的模态

Bootstrap一次只打开一个模态？

1 个答案: