问题
I am trying to show bootstrap modal on click using anchor tag. When I click on the small image, I want to show the larger image using Modal on the page here. Can you have a look at that and see what is the actual problem?
Following is my code
<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>
The modal opens but it just shows the blank black screen that fades in. It does not show any data that I have put inside the modal
回答1:
The problem is that your modals are stuck within the limitations of list items height/width and all other sort of styles you've implemented around modals.
You should somehow put the blocks with modals outside of the <ul>
There is no other way you could just rework this problem via CSS.
Try editing the template. If it is possible to get the modals out of the <li> and out of the <ul> - it'll be an easy to solve issue
回答2:
Here you go with a solution 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>Your HTML structure was wrong, Modal container should be outside the ul
Hope this will help you.
回答3:
Fast And Crazy way !!!
Use command below To move all modals and place them at the beginning BODY tag
$("body").children().first().before($(".modal"));
来源：https://stackoverflow.com/questions/46447445/bootstrap-modal-shows-blank-screen-on-click