Modal box on page load with jquery fancy box and cookie plugin
June 24, 2010
UPDATE: Custom jQuery Modal box
What I want to do?
I want to show a message or an image on the first visit on my website.
What I need to do this?
- FancyBox jQuery plugin that you can get from here: http://fancybox.net/.
I use this plugin as a better alternative to the old LightBox plugin because it resizes the loaded image to the current page size.
- jQuery Cookie plugin that you can get from here: http://plugins.jquery.com/project/cookie
This one I will use to remember if the modal box was already shown. I want to show the modal box only on the first visit on the site. No on every page load 
.
- oh and of course the jQuery library: http://jquery.com/
How I do this?
Put this in the head section of the html code.
// load all the libraries
// i like to put them in a folder called "public" then "js"
<link rel="stylesheet" type="text/css" href="public/js/fancybox/jquery.fancybox-1.3.1.css" media="screen" />
<script type="text/javascript" src="public/js/jquery.min.js"></script>
<script type="text/javascript" src="public/js/fancybox/jquery.mousewheel-3.0.2.pack.js"></script>
<script type="text/javascript" src="public/js/fancybox/jquery.fancybox-1.3.1.js"></script>
<script type="text/javascript" src="public/js/jquery.cookie.js"></script>
$(document).ready(function(){
/**
* MODAL BOX
*/
// if the requested cookie does not have the value I am looking for show the modal box
if($.cookie("modal") != 'true')
{
var _message_to_show = '<h2>Hi!</h2><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam quis mi eu elit tempor facilisis id et neque</p> <br /><br /><a href="#" id="modal_close">ENTER</a> <a href="http://www.google.com" id="modal_exit">EXIT</a><br /><br />';
// on page load show the modal box
// more info about the options you can find on the fancybox site
$.fancybox(
_message_to_show,
{
'width' : 350,
'height' : 300,
'transitionIn' : 'none',
'transitionOut' : 'elastic',
'centerOnScroll' : 'true',
'overlayOpacity' : 0.9,
'overlayColor' : '#000',
'modal' : 'true'
}
);
// in the message is a link with the id "modal_close"
// when you click on that link the modal will close and the cookie is set to "true"
// path "/" means it's active for the entire root site.. if you set it to "/admin" will be active on the "admin" folder
// expires in 7 days
// "modal" is the name i gave the cookie.. you can name it anything you want
$('#modal_close').live('click', function(e) {
e.preventDefault();
$.cookie("modal", "true", { path: '/', expires: 7 });
$.fancybox.close()
});
}
});
Oh the live demo is HERE!
And that’s it! Enjoy!
Hey did you know about this?
37 Comments
Leave a Comment
Advertisements
© 2012 Point47 | Theme by Eleven Themes
I’ve tried this on my site and even though the cookie is set, the popup keeps displaying. So I went back to your demo, and it keeps displaying the modalbox too even after the first visit.
Actually, slight revision on that: I’ve got a category of pages that need to have the popup show up on, but only for the first time on any one of the pages. So currently the popup appears for each category page you visit the first time. How do I modify it so that it only appears once for all pages?
First please read all the comments in the demo page.. I think you used that version and you didn’t read the comments..
You have to remove “$.cookie(“modal”, ‘false’)” .. it’s on the first lines of code.. so it will show only once.
And you need to set the path variable.. in the demo code was missing.. I updated that page also to reflect that..
So if you set “path: /” it will activate for entire site that cookie..
Or you can set for a specific folder like: “path: /gallery/”.. and the cookie will activate only for pages in that category.
I can’t figure out how to display an image instead of a text box
Works a treat… Many thanks for the post!!
Do you know how to edit script to allow a form in the box, as soon as i put in the into var _message_to_show. The box stops displaying onload
thank you!!!
I want this to display an iframe but I have no luck. I have tried using fancybox example (This goes to iframe
) but I have no luck. I can only put in basic html into the content area. Any feedback would be appreciated
The height and width doesn’t work?
Many thanks for this great example!
You saved my life!
How we can auto close this model window after 10 second
Ignore what I said previously.
I have created a modal box that will show one time only. To close the iframe, use:
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
$(document).ready(function(){
if($.cookie("modal") != 'true')
{
$('.newsletter').fancybox(
{
'width' : 350,
'height' : 300,
'transitionIn' : 'none',
'transitionOut' : 'elastic',
'centerOnScroll' : 'true',
'overlayOpacity' : 0.9,
'overlayColor' : '#000',
'modal' : 'true',
'type' : 'iframe'
}
).trigger('click');
$.cookie("modal", "true", { path: '/', expires: 7 });
}
});
</script>
</head>
<body>
<a class="newsletter" href="newsletter.html">about me</a>
</body>
Thanks for this!
Not sure if this helps anyone, but I used and tweaked your code so that a viewer can click anywhere (on an externally css styled div) to close and I used the onClosed to write the cookie. – Works a treat – thanks alot!!
$(document).ready(function() {
// if the requested cookie does not have the value I am looking for show the modal box
if($.cookie(“modal”) != ‘true’)
{
var _message_to_show = ‘nice styled content’;
// on page load show the modal box
$.fancybox(
_message_to_show,
{
padding:10
,hideOnContentClick: ‘true’
,overlayOpacity: 0.8
,overlayColor:’#000′
,onClosed : function() {
$.cookie(“modal”, “true”, { path: ‘/’, expires: 7 });
}
});
}
});
hello, it works fine on IE but doesnt work on google chrome.
IE show modal just once, but chrome show everytime
how can I fix that?
This script is about 2/3 of what I’m looking for. Can both the #modal_exit and #modal_close links create a cookie. I would like 2 links. #modal_exit goes to another link on my website (so I don’t want the box to display again on this page). And #modal_close just closes the box, going to the home page. Then the .fancybox never shows up again under both circumstances. Please help. I am not a javascript person. Thanks
just add an event for the #modal_exit in the script.. and change the “path” for the url
2
3
4
5
6
7
8
9
10
11
12
13
14
15
// prevents the default behavior - if a link is clicked it will block the load of that page
e.preventDefault();
// saves the cookie with modal=true for the entire domain - root domain "/" and make it expire in 7 days
// if you want to set it just for a specific folder write "/specific_page/" for the path
$.cookie("modal", "true", { path: '/', expires: 7 });
// close the modal box
$.fancybox.close()
// redirect to another page - can be a URL (http://www.google.com) or a page within the site (/some_page" )
window.location = "http://www.google.com/"
});
I can’t seem to get the size parameters to take effect. I notice others have this problem as well. Is there any info on this?
I did what you said by adding the extra code to add the cookie, but I’m encountering another problem.
When: ENTER – This creates the cookie (obviously), but won’t link to the page (weird).
When: ENTER – This will go to the page, but (obviously) doesn’t create the cookie.
The weird thing is, when I hover over the link when id=”modal_exit” the browser says the correct page like normal, but doesn’t actually go to the page.
I cannot get this link to both 1. create the cookie and 2. go to the other page. It’s either one or the other, not both. Does this seem weird to you?
@Jarel – I updated my above comment with comments and the correct code. Should work fine now
@Kevin – huh?
I am not certain what i’ve done wrong. But the popup loads erratically and sometimes, even after deleting all cookies and restarting, it still won’t load. I want the cookie to expire whenever someone leaves the site or in about 1 hour.
Also, perhaps this is an issue with fancybox or the way I’ve coded, but the fancybox functions work poorly or not at all. Though I am using nearly the same code as above, sometime only part of my message is displayed. One of the problematic functions is size and width. Mieras, on 7/10, commented on this same issue above.
Here is the code that seems to not work:
$(document).ready(function(){
/**
* MODAL BOX
*/
if($.cookie(“modal”) != ‘true’)
{
var _message_to_show = ‘Welcome to the Geographicus Antique Map Archive. The maps on this site are not for sale, rather, they are previously sold inventory presented here for scholarly research. Similar maps may be available at our retail site: http://www.geographicus.comWe do not provide pricing information for sold items.All content on this website is under copyright. ENTER EXIT‘;
// on page load show the modal box
// more info about the options you can find on the fancybox site
$.fancybox(
_message_to_show,
{
‘autoDimensions’ : ‘false’,
‘width’ : 500,
‘height’ : 500,
‘speedIn’ : 1000,
‘transitionIn’ : ‘elastic’,
‘transitionOut’ : ‘elastic’,
‘overlayOpacity’ : 0.5,
‘overlayColor’ : ‘grey’,
‘modal’ : ‘true’
}
);
// in the message is a link with the id “modal_close”
// when you click on that link the modal will close and the cookie is set to “true”
// path “/” means it’s active for the entire root site.. if you set it to “/admin” will be active on the “admin” folder
// expires in 7 days
// “modal” is the name i gave the cookie.. you can name it anything you want
$(‘#modal_close’).live(‘click’, function(e) {
e.preventDefault();
$.cookie(“modal”, “true”, { path: ‘/’, expires: 1 });
$.fancybox.close()
});
}
});
for the google chrome user this one “path:” change to “Path:”
This one live site is working fine.
IE and google chrome, Firefox, Safari..
http://www.jin-sha.com/
Is it possible to have the window launch onload but only once? So if you have a popup on your home page, it only launches the first time a viewer lands on that page and not repeatedly. Some kind of counter maybe?
that is why we use a cookie.. to show the modal only once
I’ve got this setup and working on my site, but I am trying to set it so that a click anywhere will close the modal box and set the cookie for it not to show up again. I tried following what Ben London on 02/03/2011 at 13:36 commented about, but have had no success. Has anyone been able to successfully do this? Any help would be greatly appreciated.
just change the: ‘modal’ : ‘true’ to false.
‘modal’ : ‘false’
I have tried changing modal to false and it still requires clicking a link with “modal_close”, clicking anything else does nothing. If I delete the modal line completely I am able to click anywhere and have it close, but I have not been able to get the cookie to set for that so the modal window reloads every time the page is reloaded.
I figured it out on my own, I deleted the “modal’ : ‘true’ and then added the following:
if ($.cookie(‘modal’) != ‘true’)
{
$.cookie(‘modal’, ‘true’, { path: ‘/’, expires: 7 });
}
I am trying to achieve something like this but I want to show a short video at page load and not text, like always shown here. I want the modal disappear if the user clicks somewhere and it would be wonderful if the modal would automatically disappear when the video is finished.
Can anybody help me to achieve this? What are the parts I would have to tweak and change? I appreciate any help on this.
Cheers.
I can try whatever I want, it is not closing if the overlay is clicked. This is my setup right now:
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
if($.cookie("intro") != 'true')
{
window.onload = function() {loadIntro().trigger('click');}
$.cookie("intro", "true", { Path: '/', expires: 7 });
}
});
/* loadIntro */
function loadIntro() {
// ------------------ loading customers intro page
$.fancybox({
'padding' : 0,
'width' : 960,
'height' : 450,
'scrolling' : 'no',
'autoScale' : 'false',
'transitionIn' : 'none',
'transitionOut' : 'none',
'showCloseButton' : 'true',
'modal' : 'false',
'hideOnOverlayClick': 'true',
'type' : 'iframe',
'overlayColor' : '#333333',
'overlayOpacity' : '0.8',
'href': 'http://markimark/blog/'
});
}
Does anybody have a solution for this. It should close but it isn´t….
Thanks for any help.
Did anyone notice that @Ben Landon with his post on 02/03/2011 was the only one that got the code right for having the modal closed when clicked on the overlay??
Thank you Ben!
The pasted code however, is a mess with a lot of wrong or wrong placed characters. If you copy the code that he provided, you need to clean it afterwards.
This is a cleaned version, for ie:
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
// if the requested cookie does not have the value I am looking for show the modal box
if($.cookie("modal") != 'true')
{
var _message_to_show = 'nice styled content';
// on page load show the modal box
$.fancybox(
_message_to_show,
{
'padding':10,
'width' : 960,
'height' : 450,
'type' : 'iframe',
'scrolling' : 'no',
'hideOnContentClick': 'true',
'overlayOpacity': 0.8,
'overlayColor':'#000',
'onClosed' : function() {
$.cookie("modal", "true", { path: '/', expires: 7 });
}
});
}
});
Maybe that can help someone else. It helped me. Thanks again.
@markimark
Thanks! This worked perfect.
Hi man, one question, how i can add the button close in the corner (X) to the first code (code posted by sorin)?
Thanks a lot!
Does anyone know how to implement an autoclose after x seconds for this? I’ve tried to code it unsuccessfully.
Thanks for the great script!
Cheers,
Just a quick follow-up. I figured out how to set the auto-close on this script, however the cookie does not activate when the script auto-closes, only when the ‘ENTER’ button is clicked. If anyone has a suggestion on how to activate the cookie when the modal window auto-closes, I would appreciate it.
thanks
Here’s my code:
$(document).ready(function(){
// !!! SEE THIS PLEASE !!!
// delete this line to make the modal box load only ONCE
// if you let it set to ‘false’ it will show every time .. set it to ‘true’ and it will never show
/**
* MODAL BOX
*/
// if the requested cookie does not have the value I am looking for show the modal box
if($.cookie(“modal”) != ‘true’)
{
var _message_to_show = ‘<!–<!–ENTER‘;
// on page load show the modal box
// more info about the options you can find on the fancybox site
$.fancybox(
_message_to_show,
{
‘width’ : 400,
‘height’ : 300,
‘transitionIn’ : ‘none’,
‘transitionOut’ : ‘elastic’,
‘centerOnScroll’ : ‘true’,
‘overlayOpacity’ : 0.9,
‘overlayColor’ : ‘#000′,
‘modal’ : ‘true’
}
);
// in the message is a link with the id “modal_close”
// when you click on that link the modal will close and the cookie is set to “true”
// path “/” means it’s active for the entire root site.. if you set it to “/admin” will be active on the “admin” folder
// expires in 7 days
// “modal” is the name i gave the cookie.. you can name it anything you want
$(‘#modal_close’).live(‘click’, function(e) {
e.preventDefault();
$.cookie(“modal”, “true”, { path: ‘/’, expires: 7 });
$.fancybox.close()
setTimeout (‘$.fancybox.close ()’, 12000);
});
}
});
[...] Modal box on page load with jquery fancy box and cookie plugin | | Point47Point47 – jQuery Cookie plugin that you can get from here: http://plugins.jquery.com/project/cookie [...]
Thanks. Just what I needed.
Deleting the line $.cookie("modal", 'false') STILL loads the modal window everytime, advise please.