ブートストラップモーダルでクリック時に空白の画面が表示される

Question

アンカータグを使用してクリック時にブートストラップモーダルを表示しようとしています。小さな画像をクリックすると、hereのModalを使って大きな画像を表示したいのですが。 これを見て、実際の問題点を確認できますか？続き

は私のコードです

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

でそれらを配置するには