How to close lightbox and background overlay?

Question

I am currently adding a lightbox to a clients web page and I've managed to do so, however when I close the lightbox, the overlay in the background doesn't go away and stay sin position. I have to refresh the page for it to go away.

How can I allow the overlay to also close out when I click X Close to close the popup?

Here is the area where I think the issue is...

 <button id="LearnMoreBtn">PLEASE READ OUR PARTY POLICIES</button> <div id="overlay"></div> <div id="popup"> <a href="javascript:void(0)" onclick="document.getElementById('popup').style.display='none';">X Close</a> 

Here is the entire code for the button/lightbox/ect..

  <style> button { border-radius: 19px; background-color: limegreen; color: white; font-family: "Comic-sans", cursive, Sans-serif; margin-left: 33%; } #popup a { text-align: right; text-decoration: none; color: black; } #overlay { display:none; position:fixed; left:0px; top:0px; width:100%; height:100%; background:#000; opacity:0.5; z-index:99999; } h5 { text-align: center; } #popup { display:none; position:absolute; width:1000px; height:850px; margin-left: 10%; background:#FFFFFF; border:2px solid #000; z-index:100000; color: black; } </style> <button id="LearnMoreBtn">PLEASE READ OUR PARTY POLICIES</button> <div id="overlay"></div> <div id="popup"> <a href="javascript:void(0)" onclick="document.getElementById('popup').style.display='none';">X Close</a> <b><h5> Please read through our party policies! </h5></b> <br> <b>Party Schedule:</b> The birthday party program will last two hours and include: <br> <ul> <li>30-minute welcome activity and building orientation </li> <li>60-minute hands-on program and project </li> <li>30-minute period for birthday celebration </li> <br> </ul> <b>The Museum staff who facilitate the party are flexible and will work with you to adjust the schedule for latecomers and other needs. The Museum provides: </b> <br> <ul> <li>A Museum teacher to lead the party. </li> <li>Supplies for each child to create a hands-on project (excluding the Block Party and Brick City Party). </li> <li>Exclusive use of a classroom starting 30 minutes before the party start time and ending 15 minutes after the party end time. </li> <li>The Museum will provide a safety lighter to light the birthday candles. <li>Please do not bring matches. </li> <li>One 5' round table and chairs will be provided to seat every 6-7 children. <li>One additional table will be provided for refreshments. </li> <li>Party favors for each child. If you would like to provide goody bags or any additional favors, you can bring those and stuff them with the Museum-provided items before the party begins.</li> <li> Museum t-shirt for the birthday child.</li> </ul> <br> </div> <script> window.onload = function() { document.getElementById("LearnMoreBtn").onclick = function(){ var overlay = document.getElementById("overlay"); var popup = document.getElementById("popup"); overlay.style.display = "block"; popup.style.display = "block"; }; }; </script> 

Answer 1

You're just missing the behavior to close the overlay . In the code you use to display the overlay and popup , you update the display for both, but not on the close button.

I just added the event listener with the original code and connected it to the close-button . See below:

  <style> button { border-radius: 19px; background-color: limegreen; color: white; font-family: "Comic-sans", cursive, Sans-serif; margin-left: 33%; } #popup a { text-align: right; text-decoration: none; color: black; } #overlay { display:none; position:fixed; left:0px; top:0px; width:100%; height:100%; background:#000; opacity:0.5; z-index:99999; } h5 { text-align: center; } #popup { display:none; position:absolute; width:1000px; height:850px; margin-left: 10%; background:#FFFFFF; border:2px solid #000; z-index:100000; color: black; } </style> <button id="LearnMoreBtn">PLEASE READ OUR PARTY POLICIES</button> <div id="overlay"></div> <div id="popup"> <a id="close-button" href="javascript:void(0)">X Close</a> <b><h5> Please read through our party policies! </h5></b> <br> <b>Party Schedule:</b> The birthday party program will last two hours and include: <br> <ul> <li>30-minute welcome activity and building orientation </li> <li>60-minute hands-on program and project </li> <li>30-minute period for birthday celebration </li> <br> </ul> <b>The Museum staff who facilitate the party are flexible and will work with you to adjust the schedule for latecomers and other needs. The Museum provides: </b> <br> <ul> <li>A Museum teacher to lead the party. </li> <li>Supplies for each child to create a hands-on project (excluding the Block Party and Brick City Party). </li> <li>Exclusive use of a classroom starting 30 minutes before the party start time and ending 15 minutes after the party end time. </li> <li>The Museum will provide a safety lighter to light the birthday candles. <li>Please do not bring matches. </li> <li>One 5' round table and chairs will be provided to seat every 6-7 children. <li>One additional table will be provided for refreshments. </li> <li>Party favors for each child. If you would like to provide goody bags or any additional favors, you can bring those and stuff them with the Museum-provided items before the party begins.</li> <li> Museum t-shirt for the birthday child.</li> </ul> <br> </div> <script> window.onload = function() { document.getElementById("LearnMoreBtn").onclick = function(){ var overlay = document.getElementById("overlay"); var popup = document.getElementById("popup"); overlay.style.display = "block"; popup.style.display = "block"; }; document.getElementById("close-button").onclick = function() { var overlay = document.getElementById("overlay"); var popup = document.getElementById("popup"); overlay.style.display = "none"; popup.style.display = "none"; }; }; </script>