In this article we will learn about some of the frequently asked HTML programming questions in technical like “bootstrap modal on image click codepen” Code Answer. When creating scripts and web applications, error handling is an important part. If your code lacks error checking code, your program may look very unprofessional and you may be open to security risks. Error or stack handling on html was simple and easy. An error message with filename, line number and a message describing the error is sent to the browser. This tutorial contains some of the most common error checking methods in HTML. Below are some solution about “bootstrap modal on image click codepen” Code Answer.
bootstrap modal on image click codepen
xxxxxxxxxx
1
<a href="#" id="pop">
2
<img id="imageresource" src="https://picsum.photos/200/300" style="width: 400px; height: 264px;">
3
Click to Enlarge
4
</a>
5
6
<!-- Creates the bootstrap modal where the image will appear -->
7
<div class="modal fade" id="imagemodal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
8
<div class="modal-dialog">
9
<div class="modal-content">
10
<div class="modal-header">
11
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
12
<h4 class="modal-title" id="myModalLabel">Image preview</h4>
13
</div>
14
<div class="modal-body">
15
<img src="" id="imagepreview" style="width: 400px; height: 264px;" >
16
</div>
17
<div class="modal-footer">
18
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
19
</div>
20
</div>
21
</div>
22
</div>
23
24
<----------------------- JS ---------------------------->
25
26
$("#pop").on("click", function() {
27
$('#imagepreview').attr('src', $('#imageresource').attr('src')); // here asign the image to the modal when the user click the enlarge link
28
$('#imagemodal').modal('show'); // imagemodal is the id attribute assigned to the bootstrap modal, then i use the show function
29
});
