<style>
/*
Center align smaller images and make sure larger
images won't go over their container
*/
#modal-photos .modal-body { text-align: center; }
#modal-photos .modal-body img { max-width: 100%; }
</style>
<!-- *********************************** SINGLE PHOTO MODAL -->
<!-- Thumbs -->
<div class="modal-photos">
<img src="" alt="" class="thumbnail">
<img src="" alt="" class="thumbnail">
<img src="" alt="" class="thumbnail">
</div>
<!-- Modal window (Hidden) -->
<section id="modal-photos" class="modal fade" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog">
<!-- .modal-content adds a white content area with padding -->
<!--<div class="modal-content">-->
<div class="modal-body">
<img id="modal-image" src="" alt="Modal image">
</div>
<!--</div>-->
</div>
</section>
<script>
$(".modal-photos img").on("click", function() {
$("#modal-photos").modal({
show : true,
})
// Edit source name or directory (To find the larger version of the image)
//var imgSrc = this.src.substr(0, this.src.length-7) + ".jpg";
// If the modal image is the same with the thumb just use the line below
var imgSrc = this.src;
$("#modal-image").attr("src", imgSrc);
// Close modal when you click on modal's image (optional)
$("#modal-image").on("click", function() {
$("#modal-photos").modal("hide");
})
});
</script>
<!-- *********************************** CONTENT MODAL -->
<a class="launch-modal">
Click to open modal
</a>
<!-- Modal window (Hidden) -->
<div id="modal" class="modal fade" tabindex="-1" role="dialog" 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">Title</h4>
</div>
<div class="modal-body">
<p><b>Content</b></p>
<p>This content can be static, generated by JQuery or fetched from an external file or database using AJAX.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<script>
$(".launch-modal").on("click", function() {
$('#modal').modal('show');
});
</script>
Be the first to comment
You can use [html][/html], [css][/css], [php][/php] and more to embed the code. Urls are automatically hyperlinked. Line breaks and paragraphs are automatically generated.