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>
