We have an example that will auto display a popup with JQuery Dialog. This popup will only display once time a day by adding a cookie to user browser.
The popup contains only one big image with a custom close button (we disable the dialog’s close button)
We can control time of displaying of the popup, let take a look into the cookie functions.
And the delay of displaying the popup is defined in the setTimeout function. Currently, it’s 10 milliseconds; meaning it will display immediately. For example, we want to display the popup after 2 seconds, change it to: setTimeout(“open_alert_dialog()”,2000);
Example Of The Popup
Show Popup Once A Day
<!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"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>JQuery Show Popup Once A Day</title> <meta name="robots" content="noindex, nofollow" /> <!-- Add jQuery library --> <script type="text/javascript" src="jquery-latest.min.js"></script> <script type="text/javascript" src="jquery-ui.js"></script> <style> .backgroundPopup{ display:none; position:fixed; _position:absolute; /* hack for internet explorer 6*/ height:100%; width:100%; top:0; left:0; background-color:#000000; } .close_btn_popup {display: block; width: 45px; height: 45px; position: absolute; right: -15px; top: -15px;} .close_btn_popup img { border: 0px; width: 45px; height: 45px; display: block; } .ui-dialog .ui-dialog-content { padding: 0; } .no-close .ui-dialog-titlebar-close{ display: none; } #alert_popup_dialog { width: 1024px !important; height: 768px !important; overflow: visible !important; } </style> <script type="text/javascript"> $(function(){ $('#alert_popup_dialog').dialog({ autoOpen: false, width: 758, height: 637, top:0, left:0, dialogClass: "no-close" }); }); function close_alert_popup(){ $("#alert_backgroundPopup").fadeOut("slow"); $('#alert_popup_dialog').dialog("close"); } function open_alert_dialog(){ var popup_status = readCookie("home_open_popup"); if(popup_status == 'undefined' || popup_status == 'null' || popup_status != '1'){ window.scroll(0,0); $('#alert_popup_dialog').dialog("open"); $("#alert_backgroundPopup").css({ "opacity": "0.8" }); $("#alert_backgroundPopup").fadeIn("slow"); createCookie("home_open_popup", "1", 1); $("#message").show(); } else { $("#message_after").show(); } } function createCookie(name,value,days) { if (days) { var date = new Date(); date.setTime(date.getTime()+(days*24*60*60*1000)); var expires = "; expires="+date.toGMTString(); } else var expires = ""; document.cookie = name+"="+value+expires+"; path=/"; } function readCookie(name) { var nameEQ = name + "="; var ca = document.cookie.split(';'); for(var i=0;i < ca.length;i++) { var c = ca[i]; while (c.charAt(0)==' ') c = c.substring(1,c.length); if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length); } return null; } function eraseCookie(name) { createCookie(name,"",-1); } $(document).ready(function(){ setTimeout("open_alert_dialog()",10); }); </script> </head> <body> <div id="alert_backgroundPopup" class="backgroundPopup"></div> <div id="alert_popup_dialog" style="display:none"> <div style="height: 637px; width: 758px; position:relative;"> <a class="close_btn_popup" href="javascript:void(0)" onclick="close_alert_popup();"><img src="buttonclose.png" /></a> <a href="http://4rapiddev.com/"><img src="4rapiddev.jpg" alt="" /></a> </div> </div> <div id="message" style="display:none"> A popup is showed, if you load the page again, it will not display. </div> <div id="message_after" style="display:none"> <p>The popup won't display, please wait until 1 day (depend on the cookie expiration setting) or try to <a href='http://4rapiddev.com/tips-and-tricks/how-to-clear-cache-on-internet-explorer-8-firefox-4-and-google-chrome-10/' target="_blank">clear your browser cookie</a> to see it again.</p> </div> </body> </html> |