引導模態顯示上點擊

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"));