Creating image modal buttons in bootstrap - bootstrap-modal

Question

I have 4 images in a row that I would like to use as modal buttons in Bootstrap.
How do I create a row of images that act as modals buttons in bootstrap?

Answer 1

In case you are using bootstrap 3 you can try the following:
HTML
<a href="#" id="modal">
<img id="myimg" src="http://www.yourdomain.com/assets/images/imgtoEnlarge.jpg" >
Click here to Enlarge
</a>
<!-- Creating the bootstrap modal where the image will show-->
<div class="modal fade" id="imagemodal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
<h4 class="modal-title" id="myModalLabel">Image preview</h4>
</div>
<div class="modal-body">
<img src="" id="imagepreview" style="width: 240px; height: 134px;" >
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
JavaScript:
$("#modal").on("click", function() {
$('#imagepreview').attr('src', $('#myimg').attr('src'));
$('#imagemodal').modal('show');
});