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.
1 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 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47
| // 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?

Popularity: 45% [?]