Menu
Im looking to add an Auto pop up Lightbox to my Website.
I need to be able to add it to my Html page. I'm using wordpress but the script I have only allows me to insert html code. I can not use Plugins.
Any Java script would work. I want to post an image and it say on the page until the person closes it. But id also like the image to be clickable
thanks
300
asked Mar 03 '26 11:03
function showPopup() {
document.getElementById('blackOverlay').style.display = 'block';
document.getElementById('popup').style.display = 'block';
}
function closePopup() {
document.getElementById('blackOverlay').style.display = 'none';
document.getElementById('popup').style.display = 'none';
}.blackOverlay {
display:none;
background:rgba(0,0,0,.6);
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
z-index:1;
}
.popup {
display:none;
background:#fff;
position:fixed;
top:10%;
left:50%;
width:600px;
height:80%;
margin-left:-300px;
z-index:10;
border:2px solid #000;
}
.closePopup {
float:right;
font-weight:bold;
color:red;
cursor:pointer;
}
img {
max-width:100%;
max-height:100%;
}<body onload="showPopup()">
<div>
Content behind!Content behind!Content behind!Content behind!Content behind!<br />
Content behind!Content behind!Content behind!Content behind!Content behind!<br />
Content behind!Content behind!Content behind!Content behind!Content behind!<br />
Content behind!Content behind!Content behind!Content behind!Content behind!<br />
Content behind!Content behind!Content behind!Content behind!Content behind!<br />
Content behind!Content behind!Content behind!Content behind!Content behind!<br />
</div>
<div id="blackOverlay" class="blackOverlay"></div>
<div id="popup" class="popup">
<span class="closePopup" onclick="closePopup()">X</span>
<img src="http://dummyimage.com/600x400/fff/000.png" />
</div>
</body>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With