Question

我在TPL中遇到以下代码问题。两个选项卡都显示缩略图。但是，只有第一个屏幕截图选项卡会在单击缩略图时弹出模式。保存光盘艺术选项卡的第二个选项卡存在问题。当我点击占位符缩略图时，背景会像它应该的那样变暗，但模态不会显示出来。它一直在工作，直到我将第二个模态添加到TPL进行屏幕截图。我猜测在一个页面上有两个模态有问题吗？我错过了什么或做错了什么。我的代码如下。

    <div role="tabpanel" class="tab-pane fade" id="screens"><!-- Tab Start -->
<if:IMAGESC>
<div class="container-fluid">
<div class="row">
      <if:SCREENIS1>
      <div class="col-md-4"><a href="#myModal" title="Image 1"><img src="<tag:uploaddir /><tag:torrent.screen1 />" class="thumbnail img-responsive"></a></div>
      </if:SCREENIS1>
      <if:SCREENIS2>
      <div class="col-md-4"><a href="#myModal" title="Image 2"><img src="<tag:uploaddir /><tag:torrent.screen2 />" class="thumbnail img-responsive"></a></div>
      </if:SCREENIS2>
      <if:SCREENIS3>
      <div class="col-md-4"><a href="#myModal" title="Image 3"><img src="<tag:uploaddir /><tag:torrent.screen3 />" class="thumbnail img-responsive"></a></div>
      </if:SCREENIS3>
    </div>
  </div>
<div id="myModal" class="modal fade" tabindex="-1" role="dialog">
  <div class="modal-dialog modal-lg">
  <div class="modal-content">
   <div class="modal-header">
      <button type="button" class="close" data-dismiss="modal">×</button>
      <h3 class="modal-title"><tag:language.SCREEN /></h3>
   </div>
   <div class="modal-body">

   </div>
   <div class="modal-footer">
      <button class="btn btn-default" data-dismiss="modal">Close</button>
      <a href="<tag:uploaddir /><tag:torrent.screen1 />" button class="btn btn-primary">View Full Res</a>
      <a href="<tag:uploaddir /><tag:torrent.screen1 />" download="screenshot.png" button class="btn btn-primary">Download</a>

   </div>
   </div>
   </div>
  </div>
  </if:IMAGESC> 
</div> <!-- Tab End -->

<!-- Tab Start -->
<div role="tabpanel" class="tab-pane fade" id="DiscArt"> 
<div class="container-fluid">
  <div class="row">
    <h1>FANART DISC ART</h1>
    <div class="row">
      <div class="col-lg-3 col-sm-4 col-6"><a href="#myModal1" title="Image 1"><img src="//placehold.it/600x350" class="thumbnail img-responsive"></a></div>
      <div class="col-lg-3 col-sm-4 col-6"><a href="#myModal1" title="Image 2"><img src="//placehold.it/600x350/2255EE" class="thumbnail img-responsive"></a></div>
      <div class="col-lg-3 col-sm-4 col-6"><a href="#myModal1" title="Image 3"><img src="//placehold.it/600x350/449955/FFF" class="thumbnail img-responsive"></a></div>
      <div class="col-lg-3 col-sm-4 col-6"><a href="#myModal1" title="Image 4"><img src="//placehold.it/600x350/992233" class="thumbnail img-responsive"></a></div>
    </div>
  </div>
</div>
<div id="myModal1" class="modal fade" tabindex="-1" role="dialog1">
  <div class="modal-dialog">
  <div class="modal-content">
   <div class="modal-header">
      <button type="button" class="close" data-dismiss="modal">×</button>
      <h3 class="modal-title">OMDB MOVIE NAME TAG</h3>
   </div>
   <div class="modal-body">

   </div>
   <div class="modal-footer">
      <button class="btn btn-default" data-dismiss="modal">Close</button>
   </div>
   </div>
  </div>
</div>
   <br>
   <br>
   <br>
   <p class="text-warning">Powered By FanArt API</p>
</div>
<!-- Tab End -->

这里可以看到整个TPL。 http://pastebin.com/pTqbkpDh

多个Bootstrap模态问题

0 个答案: