Thursday, August 12, 2010

How to set up a pop up ad

These days many websites utilize flashing animated splash screens and pop up ads. Here is one method of creating a simple pop up ad that isn't too annoying or blocked by script blockers since it uses CSS code. It's easy for those who aren't experienced in flash or complex java coding.

For a complete tutorial, visit Patrick Burt's blog at http://www.pat-burt.com/web-development/how-to-do-a-css-popup-without-opening-a-new-window/

Add this to your CSS code:
#blanket {background-color:#111;opacity: 0.65;filter:alpha(opacity=65);position:absolute;z-index: 9001;top:0px;left:0px;width:100%;}
#popUpDiv {position:absolute;background-color:#eeeeee;width:300px;height:300px;z-index: 9002}

Download the csspopup.js file to your website

Add this to the body of your html file:
Click Here To Open The Pop Up

In the comments of Pat's blog, you can find out how to immediately load the popup upon entering the page by removing the display:none from the DIV containers.

No comments: