Create an Image Modal using jQuery

Submitted by nurhodelta_17 on Tuesday, January 23, 2018 - 21:49.

Step 1 : Add jQuery Library

Add the jQuery in either on the header tag or at the botton of your body tag.
  1. https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js
This is the dependency to use jQuery and it is in CDN means you need internet connection for it to work.

Step 2 : Creating our Image and Modal

  1. <img id="sampleImg" src="gardens.jpg" alt="An Example of a Beautiful Garden" width="300" height="200">
  2.  
  3. <!-- Sample Modal -->
  4. <div id="sampleModal" class="modal">
  5.   <span class="close" id="closeModal">&times;</span>
  6.   <img class="modal-content" id="modalImage">
  7.   <div id="desc"></div>
  8. </div>
In here we have set our smaller image that will serve as a link to open our image modal.

Add CSS

Add the following css.
  1. #sampleImg {
  2.         cursor: pointer;
  3.         transition: 0.3s;
  4. }
  5.  
  6. #sampleImg:hover {opacity: 0.7;}
  7.  
  8. .modal {
  9.         display: none;
  10.         position: fixed;
  11.         z-index: 1;
  12.         padding-top: 100px;
  13.         left: 0;
  14.         top: 0;
  15.         width: 100%;
  16.         height: 100%;
  17.         overflow: auto;
  18.         background-color: rgb(0,0,0);
  19.         background-color: rgba(0,0,0,0.9);
  20. }
  21.  
  22. .modal-content {
  23.         margin: auto;
  24.         display: block;
  25.         width: 80%;
  26.         max-width: 700px;
  27. }
  28.  
  29. #desc {
  30.         margin: auto;
  31.         display: block;
  32.         width: 80%;
  33.         max-width: 700px;
  34.         text-align: center;
  35.         color: #ccc;
  36.         padding: 10px 0;
  37.         height: 150px;
  38. }
  39.  
  40. .modal-content, #desc {    
  41.         -webkit-animation-name: zoom;
  42.         -webkit-animation-duration: 0.6s;
  43.         animation-name: zoom;
  44.         animation-duration: 0.6s;
  45. }
  46.  
  47. @-webkit-keyframes zoom {
  48.         from {-webkit-transform:scale(0)}
  49.         to {-webkit-transform:scale(1)}
  50. }
  51.  
  52. @keyframes zoom {
  53.         from {transform:scale(0)}
  54.         to {transform:scale(1)}
  55. }
  56.  
  57. .close {
  58.         position: absolute;
  59.         top: 15px;
  60.         right: 35px;
  61.         color: #f1f1f1;
  62.         font-size: 40px;
  63.         font-weight: bold;
  64.         transition: 0.3s;
  65. }
  66.  
  67. .close:hover,
  68. .close:focus {
  69.         color: #bbb;
  70.         text-decoration: none;
  71.         cursor: pointer;
  72. }
  73.  
  74. @media only screen and (max-width: 700px){
  75.         .modal-content {
  76.         width: 100%;
  77. }
  78. }
In the CSS we initially define the modal display as none and if the user clicks the smaller image, it will change its display.

Step 3 : Add jQuery Script

Lastly, we add our jQuery script.
  1. $(document).ready(function(){
  2.         $('#sampleImg').click(function(){
  3.                 var src = $(this).attr('src');
  4.                 var alt = $(this).attr('alt');
  5.  
  6.                 $('#sampleModal').css('display', 'block');
  7.                 $('#modalImage').attr('src', src);
  8.                 $('#desc').html(alt);
  9.         });
  10.  
  11.         $('#closeModal').click(function(){
  12.                 $('#sampleModal').css('display', 'none');
  13.         });
  14. });
This is our jQuery script to trigger our Image modal.

Ful HTML

  1. <!DOCTYPE html>
  4.         <meta charset="utf-8">
  5.         <title>Create an Image Modal using jQuery</title>
  6.         <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
  7.         <style type="text/css">
  8.                 #sampleImg {
  9.                     cursor: pointer;
  10.                     transition: 0.3s;
  11.                 }
  12.  
  13.                 #sampleImg:hover {opacity: 0.7;}
  14.  
  15.                 .modal {
  16.                     display: none;
  17.                     position: fixed;
  18.                     z-index: 1;
  19.                     padding-top: 100px;
  20.                     left: 0;
  21.                     top: 0;
  22.                     width: 100%;
  23.                     height: 100%;
  24.                     overflow: auto;
  25.                     background-color: rgb(0,0,0);
  26.                     background-color: rgba(0,0,0,0.9);
  27.                 }
  28.  
  29.                 .modal-content {
  30.                     margin: auto;
  31.                     display: block;
  32.                     width: 80%;
  33.                     max-width: 700px;
  34.                 }
  35.  
  36.                 #desc {
  37.                     margin: auto;
  38.                     display: block;
  39.                     width: 80%;
  40.                     max-width: 700px;
  41.                     text-align: center;
  42.                     color: #ccc;
  43.                     padding: 10px 0;
  44.                     height: 150px;
  45.                 }
  46.  
  47.                 .modal-content, #desc {    
  48.                     -webkit-animation-name: zoom;
  49.                     -webkit-animation-duration: 0.6s;
  50.                     animation-name: zoom;
  51.                     animation-duration: 0.6s;
  52.                 }
  53.  
  54.                 @-webkit-keyframes zoom {
  55.                     from {-webkit-transform:scale(0)}
  56.                     to {-webkit-transform:scale(1)}
  57.                 }
  58.  
  59.                 @keyframes zoom {
  60.                     from {transform:scale(0)}
  61.                     to {transform:scale(1)}
  62.                 }
  63.  
  64.                 .close {
  65.                     position: absolute;
  66.                     top: 15px;
  67.                     right: 35px;
  68.                     color: #f1f1f1;
  69.                     font-size: 40px;
  70.                     font-weight: bold;
  71.                     transition: 0.3s;
  72.                 }
  73.  
  74.                 .close:hover,
  75.                 .close:focus {
  76.                     color: #bbb;
  77.                     text-decoration: none;
  78.                     cursor: pointer;
  79.                 }
  80.  
  81.                 @media only screen and (max-width: 700px){
  82.                     .modal-content {
  83.                         width: 100%;
  84.                     }
  85.                 }
  86.         </style>
  87. </head>
  89.  
  90. <img id="sampleImg" src="gardens.jpg" alt="An Example of a Beautiful Garden" width="300" height="200">
  91.  
  92. <!-- Sample Modal -->
  93. <div id="sampleModal" class="modal">
  94.   <span class="close" id="closeModal">&times;</span>
  95.   <img class="modal-content" id="modalImage">
  96.   <div id="desc"></div>
  97. </div>
  98.  
  100. $(document).ready(function(){
  101.         $('#sampleImg').click(function(){
  102.                 var src = $(this).attr('src');
  103.                 var alt = $(this).attr('alt');
  104.  
  105.                 $('#sampleModal').css('display', 'block');
  106.                 $('#modalImage').attr('src', src);
  107.                 $('#desc').html(alt);
  108.         });
  109.  
  110.         $('#closeModal').click(function(){
  111.                 $('#sampleModal').css('display', 'none');
  112.         });
  113. });
  115. </body>
  116. </html>
That ends this tutorial. Happy Coding :)
Tags
css
jQuery
image
Modal
image modal

Add new comment

About text formats
  • 225 views