Welcome To Freeware Tips Forum Index
Join! (free) • Search • FAQ • Memberlist • Usergroups • Log in

My version of Lightbox

 
Reply to topic    Welcome To Freeware Tips Forum Index » Coding Tips -> JavaScript View previous topic
View next topic
My version of Lightbox
Author Message
Please Register and Login to this forum to stop seeing this advertsing.


Speed
Site Admin
Joined: 16 Jul 2008
Posts: 1247
Add Comment
Show Comments
Add Karma

Post My version of Lightbox Reply with quote
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 View user's profile Send private message Visit poster's website
Display posts from previous:    
Reply to topic    Welcome To Freeware Tips Forum Index » Coding Tips -> JavaScript All times are GMT
Page 1 of 1

 
Jump to: 
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

Card File  Gallery  Forum Archive
Powered by phpBB © 2001, 2005 phpBB Group
Design by Speed