Lightbox without JQuery (no jquery conflict)
<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'">click
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>
Comments
Post a Comment