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
JQuery Show Popup Once A Day
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> |
