Image Modal or Expand when click in html and css

Question

So i am trying to put a code for modal or in order to expand my images. I already checked every sector or every codes and still didn't find why it's not working. I don't want nothing to change in it except the modal, it my get mess up if i change things. I got the codes from a website. In the site their result are working but when i put the codes in the notepad nothing happened. It will be really helpful if you can find what is wrong with it. Thank you in advance for those who will help me.

 body { display: grid; grid-template-columns: 100%; grid-template-rows: 8vw 130vw 7vw; grid-gap: 0em; margin: 0; padding: 0; background-color: #ffffff; width: 100%; } header, footer { grid-column: 1 / span 2; } main { grid-column: 1 / span 2; } body { margin: 0 auto; max-width: 89em; margin-left: 0; margin-right:0; padding: 0em 0; } header, main, aside, footer { display: flex; } footer { background: #eaeaea; } .main1 { margin-top: 450px; margin-left: 0; } #body_1 h2 { margin-left: 50px; font-size: 30px; color: black; margin-top: 95px; margin-bottom:3px; font-family: courier new; float: left; } #body_1 h6 { margin-left: 10px; color: blue; margin-top: 220px; margin-bottom:3px; font-family: courier new; float: left; } #body_1 h4 { margin-left: 230px; font-size: 30px; color: black; margin-top: 260px; margin-bottom:3px; position: left; float: left; } .text4 { position: absolute; float: left; top: 870px; } .background_wrap { position: absolute; background-color: rgba(19, 13, 6,0.5); z-index: -1000; width: 100%; height: 100% ; overflow:hidden; background: url("Pics&Video/laoang6.jpg") no-repeat center; background-size: cover; } .background_wrap::before{ background-color: rgba(0, 0, 0, 0.37); content: ''; display: block; height: 100%; position: absolute; width: 100%; } .content { position: absolute; width: 100%; min-height: 20%; z-index: 1000; } .sub-content { position: fixed; width: 1000px; height: 120px; margin: 0 auto; transition: 0.5s; } .sub-content.active { background-color: rgba(0, 26, 26,0.7); width: 100% } .sub-content.active ul li a { background-color: rgba(0, 26, 26,0.7); } #list { margin-right: 5px; position:fixed; margin-left: 780px; margin-top: 20px; } ul { margin-top:1px; padding: 0px; list-style: none; color: white; margin-right: 0px; font-family: calibri; font-weight: bold; } ul li { float: right; width: 130px; font-family: courier new; border-bottom: 1px solid #ffffff; border-right: 1px solid #ffffff ; border-left: 1px solid #ffffff ; border-top: 1px solid #ffffff ; line-height: 25px; text-align: center; font-size: 13px; font-weight: bolder; margin-top: 35px; margin-right: 3px; } ul li a { color: white; display: block; margin-top: 2px; font-weight: bolder; text-decoration: none; } ul li a:hover { background-color: green; font-weight:bolder; cursor: pointer; color: white } ul li ul li { display: none; font-weight: bolder; } ul li:hover ul li { display:block; cursor: pointer; color: white; margin-top:1px; margin-right: 0px; position: center; background-size: cover; font-weight: bolder; } h1 { font-family: comic sans ms, sans-serif; text-align: center; font-size: 60px; text-transform: uppercase; font-weight: bolder; color: white; margin-bottom: 6px; } h2 { font-family: comic sans ms, sans-serif; text-align: center; font-size: 30px; text-transform: uppercase; font-weight: 300; color: white; padding-top: 14%; } .wrapper { position: center; width: 750px; height: 100px; margin-left:auto; margin-right:auto; margin-top: 150px; font-size: 17px; } .image_wrap { margin-top:20px; height: 70px; margin-left:55px; } .fl_image { float: left; margin-right:5px; margin-bottom: 10px; } .content h6 { font-family: courier new; font-size: 13px; text-transform: uppercase; font-weight: 300; color: green; margin-bottom: 10px; margin-left: 25px; margin-top: 100px; } .content p { font-family: courier new; text-align: center; font-size: 20px; letter-spacing: 3px; color: #ffffff; } div.gallery { margin: 10px; border: 0px solid #ccc; float: left; width: 250px; height:250px; } div.gallery:hover { border: 1px solid #777; } div.gallery img { width: 100%; height: 100%; } .gallery1 { float: left; position: absolute; margin-top: 320px; margin-left: 10px; } div.gallery { margin: 10px; border: 0px solid #ccc; float: left; width: 300px; height:250px; } div.gallery:hover { border: 1px solid #777; } div.gallery img { width: 100%; height: 100%; } .gallery2 { float: left; position: absolute; margin-top: 840px; margin-left: 10px; } .text4 { margin-left: 360px; font-size: 30px; color: black; margin-top: 220px; margin-bottom:3px; position: left; float: left; } #myImg { border-radius: 5px; cursor: pointer; transition: 0.3s; } #myImg:hover {opacity: 0.7;} /* The Modal (background) */ .modal { display: none; /* Hidden by default */ position: fixed; /* Stay in place */ z-index: 10000 ; /* Sit on top */ padding-top: 100px; /* Location of the box */ left: 0; top: 0; width: 100%; /* Full width */ height: 100%; /* Full height */ overflow: auto; /* Enable scroll if needed */ background-color: rgb(0,0,0); /* Fallback color */ background-color: rgba(0,0,0,0.9); /* Black w/ opacity */ } /* Modal Content (Image) */ .modal-content { margin: auto; display: block; width: 80%; max-width: 600px; max-height: 450px; } /* Caption of Modal Image (Image Text) - Same Width as the Image */ #caption { margin: auto; display: block; width: 80%; max-width: 700px; text-align: center; color: #ccc; padding: 10px 0; height: 150px; } /* Add Animation - Zoom in the Modal */ .modal-content, #caption { animation-name: zoom; animation-duration: 0.6s; } @keyframes zoom { from {transform:scale(0)} to {transform:scale(1)} } /* The Close Button */ .close { position: absolute; top: 15px; right: 35px; color: #f1f1f1; font-size: 40px; font-weight: bold; transition: 0.3s; } .close:hover, .close:focus { color: #bbb; text-decoration: none; cursor: pointer; } /* 100% Image Width on Smaller Screens */ @media only screen and (max-width: 700px){ .modal-content { width: 100%; } } .transparent_btn { font-size: 10px; line-height: 50px; color: #EC7063 ; background-color: transparent; border: 1px solid #D98880; padding: 1px 20px; border-radius: 10px; text-decoration: none; cursor: pointer; transition: background-color ease 300ms; font-weight: 200; font-size: 16px; margin-top: 620px; float: left; } .transparent_btn:hover { color: #fff; background-color: rgba(245, 183, 177,0.8); } .btn { position: absolute; z-index: 1; margin-left: 640px; } .btn2 { position: absolute; margin-top: 530px; margin-left: 640px; } 

 <!Doctype html> <html> <head> <title> Hotels </title> <link style="text/css" href="Hotel.css" rel="stylesheet" > </link> <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.1/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script> $(document).ready(function(){ $(window).on('scroll', function(){ if($(window).scrollTop()){ $(".sub-content").addClass('active'); }else{ $(".sub-content").removeClass('active'); } }) }); </script> <script> $(document).ready(function(){ // Get the modal var modal = document.getElementById('myModal'); // Get the image and insert it inside the modal - use its "alt" text as a caption var img = document.getElementById('myImg'); var modalImg = document.getElementById("img04"); var captionText = document.getElementById("caption"); img.onclick = function(){ modal.style.display = "block"; modalImg.src = this.src; captionText.innerHTML = this.alt; } // Get the <span> element that closes the modal var span = document.getElementsByClassName("close")[0]; // When the user clicks on <span> (x), close the modal span.onclick = function() { modal.style.display = "none"; } }); </script> </head> <body> <header> <div class="background_wrap"> </div> <div class="content"> <div class="sub-content"> <img class="image_wrap fl_image" src="Pics&Video\\picture.png" height="100px" margin-left="5px" alt="Image One"/> <div id="list" > <ul> <li><a> <i class="fas fa-file-signature"></i> Contact</a></li> <li><a href="about.html"> <i class="fas fa-user"></i> About</a></li> <li><a href="destination.html"> History </i></a></li> <li><a> Activities <i class="fas fa-caret-down"></i></a> <ul> <li><a href="Hotel.html"> Hotels</a></li> <li><a href="festival.html"> Festival</a></li> </ul> </li> </ul> </div> <h6>Calbayog Tourism</h6> </div> </div> <div class="wrapper"> <h2>Search all travel deals, in one go</h2> <h1> HOTEL </h1> </div> </header> <main class="main1"> <div id="body_1"> <h2> Calbayog Hotel </h2> <h6> 2 Places </h6> <h4> Baypark Hotel </h4> <div class="gallery1"> <div class="gallery"> <img id="myImg" src="Pics&Video/Western Samar/Calbayog/Baypark/calbayog1.jpg" width="600" height="400"> </div> <div class="gallery"> <img id="myImg" src="Pics&Video/Western Samar/Calbayog/Baypark/calbayog2.jpg" width="600" height="400"> </div> <div class="gallery"> <img id="myImg" src="Pics&Video/Western Samar/Calbayog/Baypark/calbayog3.jpg" width="600" height="400"> </div> <div class="gallery"> <img id="myImg" src="Pics&Video/Western Samar/Calbayog/Baypark/calbayog4.jpg" width="600" height="400"> </div> <div id="myModal" class="modal"> <!-- The Close Button --> <span class="close">&times;</span> <!-- Modal Content (The Image) --> <img class="modal-content" id="img04"> <!-- Modal Caption (Image Text) --> <div id="caption"></div> </div> </div> <div class="btn"> <a href="bayparkhotel.html" class="transparent_btn">View</a> </div> <div class="text4"> <h4> Ciriaco Hotel </h4> </div> <div class="gallery2"> <div class="gallery"> <img src="Pics&Video/Western Samar/Calbayog/Ciriaco/ciriaco1.jpg" alt="Cinque Terre" width="600" height="400"> </div> <div class="gallery"> <img src="Pics&Video/Western Samar/Calbayog/Ciriaco/ciriaco2.jpg" alt="Forest" width="600" height="400"> </div> <div class="gallery"> <img src="Pics&Video/Western Samar/Calbayog/Ciriaco/ciriaco3.jpg" alt="Cinque Terre" width="600" height="400"> </div> <div class="gallery"> <img src="Pics&Video/Western Samar/Calbayog/Ciriaco/ciriaco4.jpg" alt="Forest" width="600" height="400"> </div> </div> <div class="btn2"> <a href="ciriacohotel.html" class="transparent_btn">View</a> </div> </div> </main > <footer style="background: #1a75ff;"> <div style="text-align: center; margin-left: 40%; margin-top: 30px; font-family: courier new;"> @2019 Calbayog Tourism. All rights resereved. </div> </footer> </body> </html> 

Answer 1

• First you have to move your scripts inside document.ready . They are accessing DOM elements before rendering is completed.
• Then you have to move the modal up. Do something like this and you'll see the modal move up. $("#img01").css({position:"absolute", "top": "0px"})

Then you can proceed :)