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,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.
Post a Comment