Skip To Main Content | Home | Sitemap | Contact

How can you make one of those annoying overlay advertisements?

Just pop-over and reveal a hidden division.  See the code.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras dolor. Sed sed neque. Duis eros justo, bibendum in, placerat eget, ullamcorper vel, nibh. Praesent urna arcu, sagittis eget, semper laoreet, tempus non, augue. In a pede. Vestibulum consequat eleifend sem. Duis tristique tortor ultricies massa. Duis sapien eros, posuere sit amet, rhoncus non, venenatis bibendum, tellus. Donec dui tortor, dignissim quis, eleifend eget, fermentum a, massa. Maecenas vel enim vitae sapien condimentum eleifend. Duis hendrerit luctus dui. Donec sem dui, posuere a, consectetuer eget, pretium aliquet, turpis. Vestibulum posuere porta lacus. Sed convallis molestie purus. In hac habitasse platea dictumst.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">

<head>
<title>rodsdot.com :: overlay ad divide with close</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="keywords" content="'JavaScript','DHTML','zoom','popup'">
<meta name="author" content="Roderick Divilbiss">
<meta name="copyright" content="© 2005-2010 Roderick Divilbiss">
<script type="text/javascript">
function loadOverlay() {
    document.getElementById('ad').style.top='250px';
    document.getElementById('ad').style.left='300px';
    document.getElementById('ad').style.display='block'; 
}

function clickad() {
    document.getElementById('ad').style.display='none';
}
//-->
</script>
<style>
<!--
#ad {
    background-position: left top; 
    color: #FFFF00;
    position: absolute;
    width: 300;
    height: 200;
    text-align: center;
    border: solid 2px #000000;
    z-index:9;
    background-image:url('images/overlayAd.jpg');
    background-repeat:no-repeat;
}
# ad a { 
    color: #FFFFFF;
    font-weight: bold;
    background-color: #000000 
}

-->
</style>
</head>

<body onload="loadOverlay();">
  <div id="ad"><p>Act now before its too late.<br><br>Don&#39;t miss this golden opportunity<br>
  <br><a href="javascript:clickad();">Close</a></p><p>&nbsp;</div>
</body>
</html>
  


This Weeks Most Popular Pages Newest Pages