라이트 박스 및 배경 오버레이를 닫는 방법?

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>

버튼/라이트/요법에 대한 전체 코드는 ... 내가 문제가 생각하는 영역입니다

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