Truemag

  • Categories
    • Tips And Tricks
    • Internet
    • PHP
    • Javascript
    • CSharp
    • SQL Server
    • Linux
  • Lastest Videos
  • Our Demos
  • About
  • Contact
  • Home
  • Write With Us
  • Job Request
Home Javascript JQuery Show Popup Once A Day

JQuery Show Popup Once A Day

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

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>

<!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>

Sep 29, 2014Hoan Huynh

Source Code Demo page

Macbook Show Filename ExtensionsCamSudio Set Stop - Record/Pause - Cancel Hot Keys
You Might Also Like:
  • Auto Load YouTube Video As A Popup With JQuery FancyBox
  • Facebook Publish To Wall With Popup Or Dialog And Call Back
  • Get Image Width Height With JQuery And JavaScript
  • JQuery Dialog Hide Or Remove Close Button
  • Create Cookie – Read Cookie And Delete Cookie With JavaScript
  • Jquery checkbox checked
  • FancyBox Redirect To A Predefined URL When Click On Image
  • JQuery How to use DatePicker
  • JQuery Only Show One Div On Click And Close Other Divs
  • JQuery Get selected value of radio button
Hoan Huynh

Hoan Huynh is the founder and head of 4rapiddev.com. Reach him at [email protected]

7 years ago JavascriptcreateCookie, Dialog, eraseCookie, getTime, JQuery, opacity, readCookie, setTime, setTimeout, toGMTString2,430
0
GooglePlus
0
Facebook
0
Twitter
0
Digg
0
Delicious
0
Stumbleupon
0
Linkedin
0
Pinterest
Most Viewed
PHP Download Image Or File From URL
24,442 views
Notepad Plus Plus Compare Plugin
How To Install Compare Text Plugin In Notepad Plus Plus
21,823 views
Microsoft SQL Server 2008 Attach Remove Log
Delete, Shrink, Eliminate Transaction Log .LDF File
17,631 views
JQuery Allow only numeric characters or only alphabet characters in textbox
14,978 views
C# Read Json From URL And Parse/Deserialize Json
11,691 views
4 Rapid Development is a central page that is targeted at newbie and professional programmers, database administrators, system admin, web masters and bloggers.
Recent Posts
  • Things to Learn about Installingderm Loan Type S
  • Online Photo Editor – Free Photoediting Software
  • A Guide to Finding the Best Paper Sellers
  • Photoediting in Home Isn’t Hard to Do!

  • Free Photo Editor Online
Categories
  • CSharp (45)
  • Facebook Graph API (19)
  • Google API (7)
  • Internet (87)
  • iPhone XCode (8)
  • Javascript (35)
  • Linux (27)
  • MySQL (16)
  • PHP (84)
  • Problem Issue Error (29)
  • Resources (32)
  • SQL Server (25)
  • Timeline (5)
  • Tips And Tricks (141)
  • Uncategorized (647)
Recommended
  • Custom Software Development Company
  • Online Useful Tools
  • Premium Themes
  • VPS
2014 © 4 Rapid Development