Simple Modal Window + jQuery Cookie
- by w00t
I use this plugin jQuery Simple Modal Window to display a modal window. I also use jQuery Cookie Plugin (jquery.cookie.js) to set cookies. How can I mix jQuery Simple Modal Window and jQuery Cookie? It`s necessary that after clicking on the "Continue" button, the cookies were set and the modal window in the future doesnt appear to users. I'm sorry, I'm just the beginner.
This is my code:
<!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>
<title></title>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.cookie.js"></script>
<script type="text/javascript">
$(document).ready(function() {
//Put in the DIV id you want to display
launchWindow('#alert');
//if close button is clicked
$('.window .close').click(function (e) {
$('#mask').hide();
$('.window').hide();
});
});
//if close button is clicked
$('.window .close').click(function (e) {
//Cancel the link behavior
e.preventDefault();
$('#mask').hide();
$('.window').hide();
});
//if mask is clicked
$('#mask').click(function () {
$(this).hide();
$('.window').hide();
});
function launchWindow(id) {
//Get the screen height and width
var maskHeight = $(document).height();
var maskWidth = $(window).width();
//Set heigth and width to mask to fill up the whole screen
$('#mask').css({'width':maskWidth,'height':maskHeight});
//transition effect
$('#mask').fadeIn(1000);
$('#mask').fadeTo("slow",0.95);
//Get the window height and width
var winH = $(window).height();
var winW = $(window).width();
//Set the popup window to center
$(id).css('top', winH/2-$(id).height()/2);
$(id).css('left', winW/2-$(id).width()/2);
//transition effect
$(id).fadeIn(2000);
}
</script>
<script type="text/javascript">
$(function()
{
$('#button').click(function(e)
{
$.cookie('the_cookie', '1', { expires: 999 });
});
});
</script>
</head>
<body>
<!-- Start alert block -->
<div id='boxes'>
<div id='alert' class='window'>
some text...
<input type="button" id="button" value="" class='close warn_buttons'/>
</div>
<!-- Mask -->
<div id='mask'></div>
</div>
<!-- End alert block -->
</body>
</html>
