Bootstrap Image Popup On Click | On Hover | Example

Bootstrap Image Popup Example: This tutorial shows you how to create modal image popup on click or on hover using bootstrap. A Modal is a popup window displayed on top of the webpage. And with Bootstrap Modal Plug-in you can easily create flexible modal/popup windows containing text, image, video, web forms or any other html contents.

Bootstrap Modals consists of header, body & footer area and you can have all or any of them in a modal window. Here we'll see how to add image to bootstrap modal popup and launch them on click or mouse hover event.

Bootstrap Image Popup On Click:

Step 1) Create Image Popup Modal

Here's the html markup for creating image modal in bootstrap. This modal will be kept hidden until user clicks on a button.


<div id="my-modal" class="modal fade" aria-labelledby="my-modalLabel" aria-hidden="true" tabindex="-1" role="dialog">
    <div class="modal-dialog" data-dismiss="modal">
        <div class="modal-content"  >              
            <div class="modal-body">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                <img src="images/angry-birds-crew.png" class="img-responsive" style="width: 100%;">
            </div> 
        </div>
    </div>
</div>

Step 2) Add Button

Next create a button to show the modal window when user clicks on it.


<button id="show-img" type="button" class="btn btn-default" data-toggle="modal" data-target="#my-modal">Show Image</button>

Now when user clicks on #show-img button, image popup slides in from the top of the page like this,

Above example uses data attributes to display modal popup. That's why we have added the attributes data-toggle="modal" and data-target="#my-modal" to button element. But you can also do it via JavaScript. Here's another example that uses javascript to show modals.

Open Image Popup in Bootstrap Via JavaScript:


<!DOCTYPE html>
<html>
<head>
    <title>Bootstrap Image Popup on Click Example</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="css/bootstrap.css" type="text/css" />
</head>

<body>
    <button id="show-img" type="button" class="btn btn-default">Show Image</button>

    <div id="my-modal" class="modal fade" aria-labelledby="my-modalLabel" aria-hidden="true" tabindex="-1" role="dialog">
        <div class="modal-dialog" data-dismiss="modal">
            <div class="modal-content"  >              
                <div class="modal-body">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                    <img src="images/angry-birds-crew.png" class="img-responsive" style="width: 100%;">
                </div> 
            </div>
        </div>
    </div>
        
    <script src="js/jquery-1.10.2.js"></script>
    <script src="js/bootstrap.js"></script>

    <script type="text/javascript">
    $("#show-img").click(function() {
        $('#my-modal').modal('show');
    });
    </script>
</body>
</html>

Bootstrap Image Popup On Hover:

At times you may need to open image popup on hover in bootstrap. For example while building picture gallery, you'd like to show bigger images in popup when user hovers over thumbnail images. Here's how you can do it in bootstrap.

HTML Markup:


<div id="my-modal" class="modal fade" aria-labelledby="my-modalLabel" aria-hidden="true" tabindex="-1" role="dialog">
    <div class="modal-dialog" data-dismiss="modal">
        <div class="modal-content"  >              
            <div class="modal-body">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                <img src="" class="gallery" style="width: 100%;">
            </div> 
        </div>
    </div>
</div>

<img class="show-img" src="images/angry-birds-crew.png" style="width: 255px;">

jQuery Function:


<script type="text/javascript">
$(".show-img").hover(function(){
    $('.gallery').attr('src', $(this).attr('src'));
    $('#my-modal').modal('show');
});
</script>

Above script makes the popup to show when the user hovers mouse over the thumbnail image on page.

Must Read: How to Add Form to Popover in Bootstrap

Don't Miss: How to Center Table on Page in Bootstrap

That explains about bootstrap image popups on click/hover. I hope you find this tutorial and the given examples useful. Meet you in the next post!

Guide Program and Web Development