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
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