My code is supposed to display a lightbox as soon as the page loads, similar to a popup window. However, there seems to be an issue with closing the lightbox when clicking on the 'x' button at the corner of the box. Unfortunately, the current code doesn't function as expected and the lightbox remains open. Any suggestions or help would be extremely appreciated!
lightBoxClose = function() {
document.querySelector(".lightbox").classList.add("closed");
}.lightbox {
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
display: flex;
align-items: center;
justify-content: center;
}
.toolbarLB {
text-align: right;
padding: 3px;
}
.closeLB {
color: red;
cursor: pointer;
}
.lightbox .iframeContainer {
vertical-align: middle;
background: #CCC;
padding: 2px;
background:rgba(255,255,255,0.9);
}
.lightbox.closed {
display: none;
}<div class="lightbox">
<div class="iframeContainer">
<div class="toolbarLB">
<span class="closeLB" onclick="lightBoxClose()">x</span>
</div>
<p align="center">More text is here</p>
<h1>Just text</h1>
</div>
</div>