Modal box on load
<!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>Modal Box Demo</title>
<link rel="stylesheet" type="text/css" href="public/css/layout.css" media="all" />
<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>
<script>
$(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
$.cookie("modal", 'false')
/**
* 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()
});
}
});
</script>
</head>
<body>
Hi this is the modal box demo!
</body>
</html>7f6acf93-c3a5-4bcf-ad12-18d26bb3dd83
Created on: 12th October, 2022
Last updated: 12th October, 2022
Tagged With: