The Art of Using an Overlay Mask with Your Pop-up Method

Test this pop-up method: Using an Overlay Mask with Your Pop-up Method

Windows IE: OK
Windows Firefox: OK
Windows Safari: OK
Windows Opera: OK
Mac IE: OK, except overlay is just black—it should be showing covered content translucently.
Mac Firefox: OK
Mac Safari: OK

BACK TO LIST OF POP-UP METHODS
BACK TO HOME PAGE

This one is pretty straightforward: Use an overlay to mask a web page's content, then display your pop-up on top of it so content on overlay is prominent and with working links. The links on the normal page content, under the overlay, will not work as long as the pop-up and overlay are visible. When the pop-up is handled and unpopped, the overlay will vanish as well, and all page links work again.

You may use this technique to augment the presentation of pop-up ads, or to solicit subscribers to your ezine, newsletter, or RSS feed. Use if for reminders, warnings, or statistics displaying. You may get survey participants, ask for donations, or use it for political fund raising. You can even inform visitors about some of your other related websites. There is no end to the types of purposes that pop-ups—with or without overlay masks—can be used for.

If your pop-up is about thumbnail enlargement, check out What is the easiest way to do thumbnail image enlargement windows? If you want thumbnail enlargement without clicking, check out Making an Image Enlarge When The Mouse Cursor Is Hovering Over It.

THE CODE

<HTML>
<HEAD>
<TITLE>The Art of Using an Overlay Mask with Your Pop-up Method</TITLE>

<style type="text/css">

#overlay {
top: 80px;
left: 0px;
width: 100%;
height: 100%;
background: #000;
opacity: 0.79;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=79)";
filter: alpha(opacity=79);
-moz-opacity: 0.79;
z-index: 2;
visibility: hidden;
position: absolute;}

</style>

<script type="text/javascript">

function show(l){e=document.getElementById('p');e.style.visibility=l;e=document.getElementById('overlay');e.style.visibility=l;}

</script>
</head>

<body>

<div id='overlay'></div>
<table width=200 border=0><tr>
<td align=left>
<button type="button" value="Pop!" onMouseOver="javascript:show('visible');return true">Pop!</button>
</td><td align=right>
<button type="button" value="Unpop!" onMouseOver="javascript:show('hidden');return true">Unpop!</button>
</td></tr></table>

<br><br>blah blah blah <a HREF="http://google.com" target='_blank'><b>Link</b></a> blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah

<div id="p" style="position:absolute;text-align:center;background-color:white;left:200px; top:100px; width:400px; height:458px;z-index:99;visibility:hidden"><IMG SRC="doorknob-big.gif" WIDTH=400 HEIGHT=400 BORDER=0><br>(Note: page content is barely visible under overlay mask,<br>and the link below the buttons won't work when masked.<br> But this <a HREF="http://google.com" target='_blank'><b>Link</b></a> will work since the pop-up is ON the overlay.)</div>

</body>
</html>