Welcome to WebmasterWorld Guest from 54.145.173.36

Forum Moderators: open

Message Too Old, No Replies

autoload lightbox

   
9:13 pm on Feb 29, 2012 (gmt 0)

10+ Year Member



I've searched a lot and what I find is lots of people asking the question but not many reliable answers.


anyway I have
<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'" id="link">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>



But I'd like the lightbox to load when the page loads, without requiring the user to click anything. I know its dead simple for someone with more knowledge.

any help?
10:00 pm on Feb 29, 2012 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



<body onload= "document.getElementById('light').style.display='block';document.getElementById('fade').style.display='block'" id="link">

Marshall
10:33 pm on Feb 29, 2012 (gmt 0)

10+ Year Member



thanks Marshall - works like a charm.
12:55 am on Mar 1, 2012 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



You're welcome.

Marshall