Download
<script language="javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js" type="text/javascript"></script> <script language="javascript" src="js/colorbox.js"></script> <link media="screen" rel="stylesheet" href="css/colorbox.css" /> <style> #subscribe_popup,.overlays { font:12px/1.2 Arial,Helvetica,san-serif; background:#fff !important; -moz-border-radius:3px; -webkit-border-radius:3px; border-radius:3px; border-bottom:1px solid #000; } #subscribe_popup,.overlays a,#subscribe_popup,.overlays a:hover,#subscribe_popup,.overlays a:visited { text-decoration:none; } .box-title { color:#2C2D31; font-size:25px; font-weight:700; text-align:left; margin:20px 0 5px; } #subs-container { position:relative; padding:15px 0 10px; } </style> <script> $("document").ready(function (){ // load the overlay if (document.cookie.indexOf('visited=true') == -1) { var fifteenDays = 1000*60*60*24*15; var expires = new Date((new Date()).valueOf() + fifteenDays); document.cookie = "visited=true;expires=" + expires.toUTCString(); $.colorbox({width:"580px", inline:true, href:"#subscribe_popup"}); } $(".open_popup").colorbox({width:"580px", inline:true, href:"#subscribe_popup"}); }); </script> <a href="#" class="open_popup">Click here to open the popup</a> <div style='display:none'> <div id='subscribe_popup' style='padding:10px;'> <h2 class="box-title">Title</h2> <div id="subs-container" class="clearfix"> <p>Sed lacus. Donec lectus. Nullam pretium nibh ut turpis. Nam bibendum. In nulla tortor, elementum vel, tempor at, varius non, purus. Mauris vitae nisl nec metus placerat consectetuer. Donec ipsum. Proin imperdiet est. Phasellus</p> </div> </div> </div>