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>
   
2. <html
   
   >
   
3. <head
   
   >
   
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
    
    >
    
88. <body
    
    >
    
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. 
    
99. <script
    
    >
    
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. });
     
114. </
     
     script
     
     >
     
115. </
     
     body
     
     >
     
116. </
     
     html
     
     >
     

That ends this tutorial. Happy Coding :)

Download