Create an Image Modal using CSS and Javascript

Submitted by nurhodelta_17 on Monday, January 22, 2018 - 17:05.

Step 1 : Creating our Body

First lets create our displayed image and our 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>

Step 2 : Add 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. }

Adding the Javascript

Lastly, we add our javascript
  1. var modal = document.getElementById('sampleModal');
  2. var img = document.getElementById('sampleImg');
  3. var modalImg = document.getElementById("modalImage");
  4. var captionText = document.getElementById("desc");
  5. var close = document.getElementById("closeModal");
  6.  
  7. img.onclick = function(){
  8.     modal.style.display = "block";
  9.     modalImg.src = this.src;
  10.     captionText.innerHTML = this.alt;
  11. }
  12.  
  13. close.onclick = function() {
  14.     modal.style.display = "none";
  15. }

Full HTML

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

Add new comment

About text formats
  • 103 views