Archives

Seems like everywhere you look websites are using pop-up modals with some kind of transparent overlay. While there are different hacks to maintain browser compatibility, there is a common thread in execution. One solution uses  jQuery to append a div to the body of the page, that div is styled as an absolute positioned element with a transparent background which makes it appear to overlay the content below. The overlay also servers the function of disabling the links in the content it overlays. Here is the code to get this to work.

Demo

First the CSS:

#overlay
{
 position: absolute;
 z-index: 99998;
 top: 0px;
 left: 0px;
 width: 100%;
 height: 100%;
 background-color:#000;
 opacity:0.5;
 cursor:wait;
}    

Now the jQuery:

<script type="text/javascript">
$(document).ready(function(){
      $("#mybutton").click(function(){
           $("body").append('<div id="overlay"></div>');
           return false;
      });
 })
</script>

Finally add the the button element:

<a href="some.html" id="mybutton">Hello there</a>