Display multiple images in Bootstrap Modal Popup using jQuery

Last Reply 4 months ago By pandeyism

Posted 4 months ago

Dear All,

Is that possible to populate 5 images(hyperlink) as a Modal popup on 1 button click

Posted 4 months ago

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">
                        &times;</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