The login boxes, such, as the one here, for example (click on the sign-in link in the top right corner) are in fashion, and I want one!
This is the easiest solution I have found so far. The problem is that it does not work in IE.
I don’t really know what’s going on behind the scenes with javascript, all I really wanted to do is to set the style=“display:block;”, but I guess it’s not that easy. Have you tried this?
Hi,
I fixed the css on a lightbox page for someone a while ago which you may be able to use.
http://www.pmob.co.uk/temp/javascript-centre.htm
Don’t ask me about the javascript though 
Hello Paul,
Thanks for your reply!
Did not work for me.
For template, I am using Yahoo Grids with my design on top.
I am including your css file as a last one in the <head></head> section. I was assuming that lightbox.css overrides the previous formatting, but I guess it does not. Any ideas how to troubleshoot this? My first urge is to abandon Y! grids and use one of your templates:-).
Do You have a link to your actual page so I can see what’s going on?
There may be something you have overlooked.
Paul,
I finally realized that I can just take your example (can I?) and use it in all its fullness, rather than stick your updated CSS file in all the wrong places.
I got it 95% to work.:-).
Works if FireFox but in IE the transparent layer does not cover all of the screen area. I realized this is because i am putting id=“display_overlay_holder” in the middle of the page, not right after the id=“outer”, as in your example. Is this the only way it can work?
Originally I wanted to have the window popup from any part of the page.
If you have time (thank you!) i have uploaded the template here:
Found two modal window tutorials on the web, will be reading up tonight, and thank you for additional enlightment!
Hi,
You can call the pop up from anywhere but the pop up itself should be at the end of the page.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="title" content="Women wellness articles, discussions, and news" />
<meta name="robots" content="index, follow" />
<meta name="description" content="Women wellness articles, discussions, and news" />
<meta name="keywords" content="women wellness" />
<meta name="language" content="en" />
<title>Women wellness articles, discussions, and news</title>
<script type="text/javascript" src="http://216.146.207.227/4paul/js/paul.js"></script>
<link rel="stylesheet" type="text/css" media="screen" href="http://216.146.207.227/4paul/css/reset-fonts-grids.css" />
<link rel="stylesheet" type="text/css" media="screen" href="http://216.146.207.227/4paul/css/design.css" />
<link rel="stylesheet" type="text/css" media="screen" href="css/paul.css" />
<style>
* {margin:0;padding:0}
p{margin-bottom:1em;}
html,body{height:100%;}
#outer{
min-height:100%;
position:relative;
}
* html #outer{height:100%}
#display_overlay_holder {
width: 100%;
height: 100%;
position: absolute;
top: 0px;
left: 0px;
display:none;
}
#display_overlay_bg {
position: absolute;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
background-color:#000000;
opacity: 0.85;
filter: alpha(opacity=85);
}
#display_horizon {
position: absolute;
top: 45%;
left: 0px;
width: 100%;
height: 1px;
overflow: visible;
}
#display_content {
position: absolute;
width: 400px;
height: 250px;
left: 50%;
margin-left: -200px;
top: -125px;
background-color: #CCCCCC;
}
</style>
</head>
<body>
<div id="outer">
<!-- #doc = 750px width, centered-->
<div id="doc2" class="yui-t5">
<!--HEADER START-->
<div id="hd"> Header. </div>
<!--HEADER END-->
<!--NAVIGATION START-->
<div id="navigation">
<ul>
<li><a href="#">Nav</a></li>
<li><a href="#">Nav</a></li>
<li><a href="#">Nav</a></li>
<li><a href="#" class="first">Nav</a></li>
<li><a href="#">Nav</a></li>
<li><a href="#">Nav</a></li>
<li><a href="#">Nav</a></li>
</ul>
</div>
<!--NAVIGATION END-->
<!--BODY START-->
<div id="bd">
<div id="yui-main">
<div [B]class="yui-b intro"[/B] style="padding-left: 0;">
<p><a href="#nogo" onclick="show_the_overlay();">Gimmie some popup action!</a></p>
</div>
</div>
</div>
<!--BODY END-->
<!--FOOTER START-->
<div id="ft">Footer. Footer. Footer. Footer. Footer. Footer. Footer. Footer. Footer. Footer. </div>
<!--FOOTER END-->
<!--END OF 'DOC' DIV WRAPPER-->
</div>
<!--END OF 'DOC' DIV WRAPPER-->
</div>
[B]<div id="display_overlay_holder">
<div id="display_overlay_bg" onclick="hide_the_overlay();"></div>
<div id="display_horizon">
<div id="display_content"> Wooo! Content is in here!!!1 </div>
</div>
</div>[/B]
</body>
</html>
Note that when you have multiple classes you put them is the same class=" and then separate them with a space. (class=“yui-b intro”)
I googled the source of the overlay JS and it seems the original was here
and was supplied in response to a question so I can’t see any copyright issues but you can always ask first if you want to be sure.
The original sitepoint post was here and it seems that I added the centering routines for the JS.
Thanks for all the help, Paul, much appreciated!
When I wrote that I want to be able to call the popup from any part of the page I meant to say that I wanted to have all html, css, and javascript be inserted by javascript to the .innerHtml property as a part of the Ajax call and then javascript popup code is executed. I see now that the overlay div absolutely must by at the end of the body and I’ll have to abandon my idea of building the desktop functionality for my site… for now.
I saw a solution where a javascript call via DOM manipulation adds a overlay and div content as the last element near the body, but this requires too much customization and is too messy for my needs.
Well, at least I learned some css and js along the way:-).