如何关闭灯箱和背景叠加？(How to close lightbox and background overlay?)
我目前正在向客户网页添加一个灯箱，我已经设法这样做，但是当我关闭灯箱时，背景中的叠加层不会消失并保持在罪中位置。 我必须刷新页面才能消失。
当我单击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>
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>
更多推荐
发布评论