| Author |
Message |
Please Register and Login to this forum to stop seeing this advertsing.
|
|
|
|
 |
Speed
|
 My version of Lightbox |
 |
You can see it in action on My Website
-----------------------------------------------------------------------
Hello class today I'm going to show you how to make my version of the lightbox.
If you view my div overlay tutorial you will understand black_overlay as well as white_content.
Definition of Opacity.
Then you will need the codes below.
| Code: | <a href="javascript:void(0)" onclick="document.getElementById('light').style.display='block';document.getElementById('fade').style.display='block'">EXAMPLE</a>
<div id="light" class="white_content">TEXT HERE <a href="javascript:void(0)" onclick="document.getElementById('light').style.display='none';document.getElementById('fade').style.display='none'">Close</a></div></div> |
What this does is it has the link as you saw in the example saying example and when you click it you got that pop up, well this code is exactly what that does.
And of course the close link closes the poped up box.
NOTE: You need both the codes otherwise it won't work.
Now the code below declares the black background for the black_overlay div when you click the link.
| Code: | | <div id="fade" class="black_overlay"></div> |
All the codes together.
| Code: | <html>
<head>
<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: 70%;
padding: 16px;
border: 16px solid orange;
background-color: white;
z-index:1002;
overflow: auto;
}
</style>
</head>
<body>
<center><p><a href="javascript:void(0)" onclick="document.getElementById('light').style.display='block';document.getElementById('fade').style.display='block'">EXAMPLE</a></p></center>
<div id="light" class="white_content">You're now viewing the lightbox content in css, but with some javascript. <BR><BR><div align="right"><a href="javascript:void(0)" onclick="document.getElementById('light').style.display='none';document.getElementById('fade').style.display='none'">Close</a></div></div>
<div id="fade" class="black_overlay"></div>
</body>
</html> |
_________________
Train Insane or Remain The Same
There's No Room In A Warriors Heart For Self Doubt |
|
| Wed Jul 16, 2008 1:35 pm |
   |
|
|
|
You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot vote in polls in this forum
|
|
|
