如何關閉燈箱和背景疊加？

Question

我目前正在向客戶網頁添加燈箱，並且設法做到了這一點，但是當我關閉燈箱時，背景中的疊加層不會消失並保持原樣。 我必須刷新頁面才能消失。

當我單擊X關閉以關閉彈出窗口時，如何允許覆蓋層也關閉？

我認為這是問題所在。

 <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> 

這是按鈕/燈箱/ 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

您只是缺少關閉overlay的行為。 在用於顯示overlay和popup的代碼中，您將同時更新兩者的顯示，但不會更新關閉按鈕。

我只是用原始代碼添加了事件監聽器，並將其連接到close-button 。 見下文：

  <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>