Hi ROHIT,
Please refer below sample.
HTML
<script type="text/javascript" src='https://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.3.min.js'></script>
<script type="text/javascript" src='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.3/js/bootstrap.min.js'></script>
<link rel="stylesheet" href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.3/css/bootstrap.min.css'
media="screen" />
<script type="text/javascript">
$(function () {
$("#btnShowPopup").click(function () {
$("#MyPopup").modal("show");
});
});
</script>
<div>
<!-- Bootstrap -->
<center>
<input type="button" id="btnShowPopup" value="Show Popup" class="btn btn-info btn-lg" />
</center>
<!-- Modal Popup -->
<div id="MyPopup" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">
×</button>
<h4 class="modal-title">
</h4>
</div>
<a href="#" class="btnShowPopup">
<img src="http://static.flickr.com/66/199481236_dc98b5abb3_s.jpg" style="width: 150px;
height: 100px;"/>
</a><a href="#" class="btnShowPopup">
<img src="http://static.flickr.com/75/199481072_b4a0d09597_s.jpg" style="width: 100px;
height: 100px;"/>
</a><a href="#" class="btnShowPopup">
<img src="http://static.flickr.com/57/199481087_33ae73a8de_s.jpg" style="width: 150px;
height: 100px;"/>
</a><a href="#" class="btnShowPopup">
<img src="http://static.flickr.com/77/199481108_4359e6b971_s.jpg" style="width: 150px;
height: 100px;"/>
</a><a href="#" class="btnShowPopup">
<img src="http://static.flickr.com/58/199481143_3c148d9dd3_s.jpg" style="width: 150px;
height: 100px;"/>
</a>
</div>
</div>
</div>
</div>
Demo