Internal Popup Example

Have you ever been stuck with the delima of how to make a cool "lightview" internal popup but you either have conflicts with MOO Tools, Prototype, or Scriptaculuous; or more importantly all those tools are 60k to 100k each? I made a page in an hour that does exaclty the same thing as "lightview" for a login page that pops up contact details. All this does is hide / revels a div with a few lines of JavaScript.

See Example Here
Download Example Here

(I’m going to walk through the download and explain everything that is important. I'm not going to post the entire code below. Simply click on the example above and view the source or download it and look at the code.)

Code Example:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<link href="css/global.css" rel="stylesheet" type="text/css" /></head>
<title>Login</title>
</head>
<body>
<script language="javascript" type="text/javascript">
function pop()
{
    var x = document.getElementById('contactLogin');
    x.style.display = 'block';

    var y = document.getElementById('coverLogin');
    y.style.display = 'block';
}

function hide()
{
    var x = document.getElementById('contactLogin');
    x.style.display = 'none';

    var y = document.getElementById('coverLogin');
    y.style.display = 'none';
}

</script>
<body>
<div id="coverLogin" onclick="javascript:hide();></div>
<div id="contactLogin">
    <h1>Contact Information:</h1>
    <h2>Trigpoint Solutions, Inc<br />Email: <a href="mailto:support@trigsol.com">support@t.com</a></h2>
    <center><a href="#"><button onclick="javascript:hide();">Close</button></a></center>
</div>
<div id="wrapper">
    <div id="contact"><a href="#" onclick="javascript:pop();">Contact Us</a></div>
</div>
</body>
</html>

Explanation:

gears

The nuts and bolts of this works by clicking on the Contact Us anchor at the bottom. The "onclick="javascript:pop();"" then calls the pop function at the top of the script. The pop function set us up a variable of "x" to get the ID for the "contactLogin" DIV. The next line of that says I want you to switch the style of that DIV to "block." If you look in the CSS for "contactLogin" you will notice that the display is set to "none." So what is going on in the function of pop is that when you click on Contact Us, it call the pop function that tells both "contactLogin" DIV and the "contactCover" DIV to change from "display:none;" to "display:block;."

The second part of this equasion is to turn off the pop up. This happens the close button labeled "onclick="javascript:();" What happens here is that the hide function does the reverse of the pop function. It looks for both the "contactLogin" DIV and the "contactCover" DIV and changes the style to "display:none;."

gears

The thrid part of this equation is in the CSS. Look at the bottom of the style sheet to where it says "!!!!! What Makes POP UP WORK !!!!!." What is important for the "contactLogin" DIV is the section labeled "position:absolute;left:50%;top:0px;margin:80px 0px 0 -155px;z-index:5000000;." This section ensures that the pop up will stay centered no matter how wide the browser is. The next important thing is the "coverLogin" DIV that is labeled "position:absolute;top:0;left:0;z-index:4000000;." Along with the opacity, this sets a cover over the page. The last super important thing for IE is the section labeled "#coverLogin[id]{position:fixed;}." This makes IE draw over DIV 100% of the screen

The last and most important part of this equation is where you place your "coverLogin" and "contactLogin" DIVs. See how they are outside the centering "wrapper" DIV. If you do not do it this way, IE 6 freaks out and can’t handle it. The consequence will be that the cover will not work for IE 6.