引导模态显示上点击

Question

我试图表明使用锚标记单击引导模式空白屏幕。当我点击小图片上，我想表明here在页面上使用模态的放大图像。 你能看看这，看看有什么实际问题？

以下是我的代码

<ul class="previews-list slides thumbs" style="width: 1000%; transition-duration: 0s; transform: translate3d(0px, 0px, 0px);"> 
                            <li style="width: 76px; float: left; display: block;"><a href="#mgsmodal1" data-toggle="modal" data-target="#mgsmodal1"><img alt="front without dupatta" src="https://vastracode.com/media/catalog/product/cache/1/small_image/76x93/9df78eab33525d08d6e5fb8d27136e95/0/1/01_1.jpg" draggable="false"></a></li> 
<div id="mgsmodal1" class="modal fade" role="dialog" tabindex="-1" aria-hidden="true"> 
    <div class="modal-dialog" role="document"> 
     <!-- Modal content--> 
     <div class="modal-content"> 
      <div class="modal-header"> 
       <button type="button" class="close" data-dismiss="modal">×</button> 
      </div> 
      <div class="modal-body"> 
<div class="magnify1"> 
<div class="large1"></div> 
<img alt="front without dupatta" src="https://vastracode.com/media/catalog/product/cache/1/image/9df78eab33525d08d6e5fb8d27136e95/0/1/01_1.jpg" class="small1" draggable="false"> 
</div> 
      </div> 
      <div class="modal-footer"> 
       <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
      </div> 
     </div> 
    </div> 
</div> 
                           <li style="width: 76px; float: left; display: block;"><a href="#mgsmodal2" data-toggle="modal" data-target="#mgsmodal2"><img alt="front with dupatta" src="https://vastracode.com/media/catalog/product/cache/1/small_image/76x93/9df78eab33525d08d6e5fb8d27136e95/0/3/03_2.jpg" draggable="false"></a></li> 
<div id="mgsmodal2" class="modal fade" role="dialog" tabindex="-1" aria-hidden="true"> 
    <div class="modal-dialog" role="document"> 
     <!-- Modal content--> 
     <div class="modal-content"> 
      <div class="modal-header"> 
       <button type="button" class="close" data-dismiss="modal">×</button> 
      </div> 
      <div class="modal-body"> 
<div class="magnify2"> 
<div class="large2"></div> 
<img alt="front with dupatta" src="https://vastracode.com/media/catalog/product/cache/1/image/9df78eab33525d08d6e5fb8d27136e95/0/3/03_2.jpg" class="small2" draggable="false"> 
</div> 
      </div> 
      <div class="modal-footer"> 
       <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
      </div> 
     </div> 
    </div> 
</div> 
                           <li style="width: 76px; float: left; display: block;"><a href="#mgsmodal3" data-toggle="modal" data-target="#mgsmodal3"><img alt="close up" src="https://vastracode.com/media/catalog/product/cache/1/small_image/76x93/9df78eab33525d08d6e5fb8d27136e95/0/2/02_1.jpg" draggable="false"></a></li> 
<div id="mgsmodal3" class="modal fade" role="dialog" tabindex="-1" aria-hidden="true"> 
    <div class="modal-dialog" role="document"> 
     <!-- Modal content--> 
     <div class="modal-content"> 
      <div class="modal-header"> 
       <button type="button" class="close" data-dismiss="modal">×</button> 
      </div> 
      <div class="modal-body"> 
<div class="magnify3"> 
<div class="large3"></div> 
<img alt="close up" src="https://vastracode.com/media/catalog/product/cache/1/image/9df78eab33525d08d6e5fb8d27136e95/0/2/02_1.jpg" class="small3" draggable="false"> 
</div> 
      </div> 
      <div class="modal-footer"> 
       <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
      </div> 
     </div> 
    </div> 
</div> 
                           <li style="width: 76px; float: left; display: block;"><a href="#mgsmodal4" data-toggle="modal" data-target="#mgsmodal4"><img alt="side image " src="https://vastracode.com/media/catalog/product/cache/1/small_image/76x93/9df78eab33525d08d6e5fb8d27136e95/0/4/04_1.jpg" draggable="false"></a></li> 
<div id="mgsmodal4" class="modal fade" role="dialog" tabindex="-1" aria-hidden="true"> 
    <div class="modal-dialog" role="document"> 
     <!-- Modal content--> 
     <div class="modal-content"> 
      <div class="modal-header"> 
       <button type="button" class="close" data-dismiss="modal">×</button> 
      </div> 
      <div class="modal-body"> 
<div class="magnify4"> 
<div class="large4"></div> 
<img alt="side image " src="https://vastracode.com/media/catalog/product/cache/1/image/9df78eab33525d08d6e5fb8d27136e95/0/4/04_1.jpg" class="small4" draggable="false"> 
</div> 
      </div> 
      <div class="modal-footer"> 
       <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
      </div> 
     </div> 
    </div> 
</div> 
                           <li style="width: 76px; float: left; display: block;"><a href="#mgsmodal5" data-toggle="modal" data-target="#mgsmodal5"><img alt="" src="https://vastracode.com/media/catalog/product/cache/1/small_image/76x93/9df78eab33525d08d6e5fb8d27136e95/0/5/05.jpg" draggable="false"></a></li> 
<div id="mgsmodal5" class="modal fade" role="dialog" tabindex="-1" aria-hidden="true"> 
    <div class="modal-dialog" role="document"> 
     <!-- Modal content--> 
     <div class="modal-content"> 
      <div class="modal-header"> 
       <button type="button" class="close" data-dismiss="modal">×</button> 
      </div> 
      <div class="modal-body"> 
<div class="magnify5"> 
<div class="large5"></div> 
<img alt="" src="https://vastracode.com/media/catalog/product/cache/1/image/9df78eab33525d08d6e5fb8d27136e95/0/5/05.jpg" class="small5" draggable="false"> 
</div> 
      </div> 
      <div class="modal-footer"> 
       <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
      </div> 
     </div> 
    </div> 
</div> 
                          </ul> 

的模式打开，但它只是显示黑屏，在变淡。这并不表明我已经把里面的模式

Answer 1

的问题是任何数据你的模态被限制在列表项的高度/宽度和你在模态中实现的所有其他类型的限制之内。

你应该以某种方式把模块与<ul> 之外的块没有其他方式，你可以通过CSS重写这个问题。

尝试编辑模板。如果有可能获得模态出<li>的进出<ul>的 - 这将是一个容易解决的问题

Answer 2

在这里，你去了一个解决方案https://jsfiddle.net/pzmygmz0/

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<ul class="previews-list slides thumbs" style="width: 1000%; transition-duration: 0s; transform: translate3d(0px, 0px, 0px);"> 
 
    <li style="width: 76px; float: left; display: block;"> 
 
    <a href="#mgsmodal1" data-toggle="modal" data-target="#mgsmodal1"> 
 
     <img alt="front without dupatta" src="https://vastracode.com/media/catalog/product/cache/1/small_image/76x93/9df78eab33525d08d6e5fb8d27136e95/0/1/01_1.jpg" draggable="false"> 
 
    </a> 
 
    </li> 
 
    <li style="width: 76px; float: left; display: block;"> 
 
    <a href="#mgsmodal2" data-toggle="modal" data-target="#mgsmodal2"> 
 
     <img alt="front with dupatta" src="https://vastracode.com/media/catalog/product/cache/1/small_image/76x93/9df78eab33525d08d6e5fb8d27136e95/0/3/03_2.jpg" draggable="false"> 
 
    </a> 
 
    </li> 
 
    <li style="width: 76px; float: left; display: block;"> 
 
    <a href="#mgsmodal3" data-toggle="modal" data-target="#mgsmodal3"> 
 
     <img alt="close up" src="https://vastracode.com/media/catalog/product/cache/1/small_image/76x93/9df78eab33525d08d6e5fb8d27136e95/0/2/02_1.jpg" draggable="false"> 
 
    </a> 
 
    </li> 
 
    <li style="width: 76px; float: left; display: block;"> 
 
    <a href="#mgsmodal4" data-toggle="modal" data-target="#mgsmodal4"> 
 
     <img alt="side image " src="https://vastracode.com/media/catalog/product/cache/1/small_image/76x93/9df78eab33525d08d6e5fb8d27136e95/0/4/04_1.jpg" draggable="false"> 
 
    </a> 
 
    </li> 
 
    <li style="width: 76px; float: left; display: block;"> 
 
    <a href="#mgsmodal5" data-toggle="modal" data-target="#mgsmodal5"> 
 
     <img alt="" src="https://vastracode.com/media/catalog/product/cache/1/small_image/76x93/9df78eab33525d08d6e5fb8d27136e95/0/5/05.jpg" draggable="false"> 
 
    </a> 
 
    </li> 
 
</ul>  
 
    
 
<div id="mgsmodal1" class="modal fade" role="dialog" tabindex="-1" aria-hidden="true"> 
 
    <div class="modal-dialog" role="document"> 
 
    <div class="modal-content"> 
 
     <div class="modal-header"> 
 
     <button type="button" class="close" data-dismiss="modal">×</button> 
 
     </div> 
 
     <div class="modal-body"> 
 
     <div class="magnify1"> 
 
      <div class="large1"></div> 
 
      <img alt="front without dupatta" src="https://vastracode.com/media/catalog/product/cache/1/image/9df78eab33525d08d6e5fb8d27136e95/0/1/01_1.jpg" class="small1" draggable="false"> 
 
     </div> 
 
     </div> 
 
     <div class="modal-footer"> 
 
     <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div> 
 

 
<div id="mgsmodal2" class="modal fade" role="dialog" tabindex="-1" aria-hidden="true"> 
 
    <div class="modal-dialog" role="document"> 
 
    <!-- Modal content--> 
 
    <div class="modal-content"> 
 
     <div class="modal-header"> 
 
     <button type="button" class="close" data-dismiss="modal">×</button> 
 
     </div> 
 
     <div class="modal-body"> 
 
     <div class="magnify2"> 
 
      <div class="large2"></div> 
 
      <img alt="front with dupatta" src="https://vastracode.com/media/catalog/product/cache/1/image/9df78eab33525d08d6e5fb8d27136e95/0/3/03_2.jpg" class="small2" draggable="false"> 
 
     </div> 
 
     </div> 
 
     <div class="modal-footer"> 
 
     <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div> 
 

 
<div id="mgsmodal3" class="modal fade" role="dialog" tabindex="-1" aria-hidden="true"> 
 
    <div class="modal-dialog" role="document"> 
 
    <!-- Modal content--> 
 
    <div class="modal-content"> 
 
     <div class="modal-header"> 
 
     <button type="button" class="close" data-dismiss="modal">×</button> 
 
     </div> 
 
     <div class="modal-body"> 
 
     <div class="magnify3"> 
 
      <div class="large3"></div> 
 
      <img alt="close up" src="https://vastracode.com/media/catalog/product/cache/1/image/9df78eab33525d08d6e5fb8d27136e95/0/2/02_1.jpg" class="small3" draggable="false"> 
 
     </div> 
 
     </div> 
 
     <div class="modal-footer"> 
 
     <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div> 
 

 
<div id="mgsmodal4" class="modal fade" role="dialog" tabindex="-1" aria-hidden="true"> 
 
    <div class="modal-dialog" role="document"> 
 
    <!-- Modal content--> 
 
    <div class="modal-content"> 
 
     <div class="modal-header"> 
 
     <button type="button" class="close" data-dismiss="modal">×</button> 
 
     </div> 
 
     <div class="modal-body"> 
 
     <div class="magnify4"> 
 
      <div class="large4"></div> 
 
      <img alt="side image " src="https://vastracode.com/media/catalog/product/cache/1/image/9df78eab33525d08d6e5fb8d27136e95/0/4/04_1.jpg" class="small4" draggable="false"> 
 
     </div> 
 
     </div> 
 
     <div class="modal-footer"> 
 
     <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div> 
 

 
<div id="mgsmodal5" class="modal fade" role="dialog" tabindex="-1" aria-hidden="true"> 
 
    <div class="modal-dialog" role="document"> 
 
    <!-- Modal content--> 
 
    <div class="modal-content"> 
 
     <div class="modal-header"> 
 
     <button type="button" class="close" data-dismiss="modal">×</button> 
 
     </div> 
 
     <div class="modal-body"> 
 
     <div class="magnify5"> 
 
      <div class="large5"></div> 
 
      <img alt="" src="https://vastracode.com/media/catalog/product/cache/1/image/9df78eab33525d08d6e5fb8d27136e95/0/5/05.jpg" class="small5" draggable="false"> 
 
     </div> 
 
     </div> 
 
     <div class="modal-footer"> 
 
     <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

您的HTML结构有误，Modal container应该在ul以外

希望这能帮助您。

Answer 3

快速和疯狂的方式！下面

use命令将所有模态，并将其置于开始BODY标签

$("body").children().first().before($(".modal"));