jquery Popup onload || with cookie

jquery Popup onload || with cookie

Firstly, it's about time jquery got a decent support forum

And of course secondly , I would like a popup on my site that informs someone they are using IE and should convert to firefox.

So far I have comeup with the following which works but I still need to implement the following.

  • Cookies - so it displays once every 10 days or so.
  • someway to detect if a user is using Internet Explorer.


Here is what I have come up with so far.It pops up alright but thats about it.

popup.js
/***************************/
//@Author: Adrian "yEnS" Mato Gondelle
//@website: www.yensdesign.com
//@email: yensamg@gmail.com
//@license: Feel free to use it, but keep this credits please!               
/***************************/

//SETTING UP OUR POPUP
//0 means disabled; 1 means enabled;
var popupStatus = 0;

//loading popup with jQuery magic!
function loadPopup(){
   //loads popup only if it is disabled
   if(popupStatus==0){
      $("#backgroundPopup").css({
         "opacity": "0.7"
      });
      $("#backgroundPopup").fadeIn("slow");
      $("#popupContact").fadeIn("slow");
      popupStatus = 1;
   }
}

//disabling popup with jQuery magic!
function disablePopup(){
   //disables popup only if it is enabled
   if(popupStatus==1){
      $("#backgroundPopup").fadeOut("slow");
      $("#popupContact").fadeOut("slow");
      $.cookie('leftCol', 'collapsed');
      popupStatus = 0;
   }
}

//centering popup
function centerPopup(){
   //request data for centering
   var windowWidth = document.documentElement.clientWidth;
   var windowHeight = document.documentElement.clientHeight;
   var popupHeight = $("#popupContact").height();
   var popupWidth = $("#popupContact").width();
   //centering
   $("#popupContact").css({
      "position": "absolute",
      "top": windowHeight/2-popupHeight/2,
      "left": windowWidth/2-popupWidth/2
   });
   //only need force for IE6
   
   $("#backgroundPopup").css({
      "height": windowHeight
   });
   
}


//CONTROLLING EVENTS IN jQuery
//$(document).ready(function(){
window.onload = function(){    
   //LOADING POPUP
   //Click the button event!
   //$("#button").click(function(){
      //centering with css
      centerPopup();
      //load popup
      loadPopup();
   //});

   //CLOSING POPUP
   //Click the x event!
   $("#popupContactClose").click(function(){
      disablePopup();
   });
   //Click out event!
   $("#backgroundPopup").click(function(){
      disablePopup();
   });
   //Press Escape event!
   $(document).keypress(function(e){
      if(e.keyCode==27 && popupStatus==1){
         disablePopup();
      }
   });

//});
}


popup.css
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em,
font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody,
tfoot, thead, tr, th, td {
border:0pt none;
font-family:inherit;
font-size:100%;
font-style:inherit;
font-weight:inherit;
margin:0pt;
padding:0pt;
vertical-align:baseline;
}
body{
background:#fff none repeat scroll 0%;
line-height:1;
font-size: 12px;
font-family:arial,sans-serif;
margin:0pt;
height:100%;
}
table {
border-collapse:separate;
border-spacing:0pt;
}
caption, th, td {
font-weight:normal;
text-align:left;
}
blockquote:before, blockquote:after, q:before, q:after {
content:"";
}
blockquote, q {
quotes:"" "";
}
a{
cursor: pointer;
text-decoration:none;
}
br.both{
clear:both;
}
#backgroundPopup{
display:none;
position:fixed;
_position:absolute; /* hack for internet explorer 6*/
height:100%;
width:100%;
top:0;
left:0;
background:#000000;
border:1px solid #cecece;
z-index:1;
}
#popupContact{
display:none;
position:fixed;
_position:absolute; /* hack for internet explorer 6*/
height:384px;
width:408px;
background:#FFFFFF;
border:2px solid #cecece;
z-index:2;
padding:12px;
font-size:13px;
}
#popupContact h1{
text-align:left;
color:#6FA5FD;
font-size:22px;
font-weight:700;
border-bottom:1px dotted #D3D3D3;
padding-bottom:2px;
margin-bottom:20px;
}
#popupContactClose{
font-size:14px;
line-height:14px;
right:6px;
top:4px;
position:absolute;
color:#6fa5fd;
font-weight:700;
display:block;
}
#button{
text-align:center;
margin:100px;
}


index.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr">
<head>
   <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
   <title>Jquery Popup</title>
   <link rel="stylesheet" href="popup.css" type="text/css" media="screen" />
   <script src="http://jqueryjs.googlecode.com/files/jquery-1.2.6.min.js" type="text/javascript"></script>
   <script src="popup.js" type="text/javascript"></script>
</head>
<body>
   </center>
   <div id="popupContact">
      <a id="popupContactClose">x</a>
      <h1>my popup</h1>
      <p id="contactArea">
         this is a test
         <br/><br/>
         something exciting
         <br/><br/>
         Click on X (right-top) or Click Out from the popup to close the popup!
         <br/><br/>
      </p>
   </div>
   <div id="backgroundPopup"></div>
</body>
</html>


Is anyone able to help me out here, or provide some suggestions.