bootstrap modal on image click codepen

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">&times;</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});