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>
  2. <html>
  3. <head>
  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>
  87. <body>
  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.  
  98. <script>
  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. }
  114. </script>
  115. </body>
  116. </html>
That ends this tutorial. Happy Coding :)

Tags

Add new comment

About text formats
  • 88 views