Member Avatar for Joe34

I found this code on some really awesome website, but I'm trying to change it up a little. As you can see a light box pops up after clicking the link. I want to make it where the light box automatically pops up without clicking the link? How?

Thanks in advance!

<html>
	<head>
		<title>LIGHTBOX EXAMPLE</title>
		<style>
		.black_overlay{
			display: none;
			position: absolute;
			top: 0%;
			left: 0%;
			width: 100%;
			height: 100%;
			background-color: black;
			z-index:1001;
			-moz-opacity: 0.8;
			opacity:.80;
			filter: alpha(opacity=80);
		}
		.white_content {
			display: none;
			position: absolute;
			top: 25%;
			left: 25%;
			width: 50%;
			height: 50%;
			padding: 16px;
			border: 16px solid orange;
			background-color: white;
			z-index:1002;
			overflow: auto;
		}
	</style>
	</head>
	<body>
		<p>This is the main content. To display a lightbox click <a href = "javascript:void(0)" onclick = "document.getElementById('light').style.display='block';document.getElementById('fade').style.display='block'">here</a></p>
		<div id="light" class="white_content">This is the lightbox content. <a href = "javascript:void(0)" onclick = "document.getElementById('light').style.display='none';document.getElementById('fade').style.display='none'">Close</a></div>
		<div id="fade" class="black_overlay"></div>
	</body>
</html>
  • 2 Contributors
  • 4 Replies
  • 245 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by twiss
Member Avatar for twiss

Remove the two display:none from the css.

Member Avatar for Joe34

Silly me just overlooked that, thanks anyway!

Member Avatar for Joe34

Any idea on how to make the popup display later like 5-10 seconds later?

Member Avatar for twiss

Yes, put them back and put something like this in the head:

window.onload = function() {
  setTimeout(function() {
    document.getElementById('light').style.display='block';
    document.getElementById('fade').style.display='block';
  }, 5000);
};
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.