popup transparent window (ie6 ie7 ff)
NOTICE: this post is deprecated. Now I would recommend using a library for example JQuery or Prototype with a “popup window” plugin installed.
How to make a transparent glass popup pane that covers the whole site and displays a message window?
Simple example:
<html>
<style type="text/css">
/* START OF glass window pane styles */
#glass_background {
width:100%;
height:100%;
top:0;
left:0;
position: fixed;
z-index:51; background: #333333 none repeat scroll 0 0;
opacity:0.7;
display:none;
}
#message_box {
width:450px;
height:300px;
border:2px solid #AEAEAE;
z-index:100;
margin:50px auto 10px;
background:white none repeat scroll 0 0;
position:absolute;
left:200px;
top:20px;
display:none;
}
/* END OF glass window pane styles */
/* Other styles */
div.site_content {
color:red;
}
</style>
<script type="text/javascript">
function showMessageGlassPane(msg) {
document.getElementById('message_box').style.display = 'block';
document.getElementById('glass_background').style.display = 'block';
document.getElementById('message_box_content').innerHTML = msg;
}
function hideMessageGlassPane() {
document.getElementById('message_box').style.display = 'none';
document.getElementById('glass_background').style.display = 'none';
}
</script>
<!--[if lte IE 7]>
<style type="text/css">
#glass_background {
position: absolute;
}
</style>
<![endif]-->
<!--[if IE]>
<style type="text/css">
#glass_background {
filter:alpha(opacity=70);
}
</style>
<![endif]-->
<body>
<div class="site_content">
<a href="#" onclick="showMessageGlassPane('Hello glass pane!')">SHOW WINDOW (click me!)</a>
<br />
CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT
CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT
CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT
CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT
CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT
CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT
CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT
CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT
CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT
CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT
CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT
CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT
CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT
CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT
CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT
CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT
CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT
CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT
CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT
CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT
CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT
CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT
CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT
CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT
</div>
<div id="glass_background">
</div>
<div id="message_box">
<div id="message_box_content">
Default message.
</div>
<a href="#" onclick="hideMessageGlassPane()">CLOSE</a>
</div>
</body>
</html>