article

Saturday, July 7, 2012

Set Modal box cookie using colorbox jquery plugins

Set Modal box cookie using colorbox jquery plugins

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>

Related Post