Simple Modal Window + jQuery Cookie_问答_开发者

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) { 
 //C开发者_JAVA技巧ancel 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>

Don't call launchWindow() if cookie is set.

if(!$.cookie('the_cookie')){
  launchWindow('#alert');
}

Change Your Script with this one, and include latest jquery and cookie script. It will work fine.

 $(document).ready(function() {  
    if($.cookie("modal") != 'true')
    {
    //Put in the DIV id you want to display  
    launchWindow('#alert');   


//if close button is clicked
$('.window .close').click(function (e) { 
//Cancel the link behavior
e.preventDefault();
$.cookie("modal", "true", { path: '/', expires: 7 });
$('#mask').hide();
$('.window').hide();
});  

//if mask is clicked
$('#mask').click(function () {
$(this).hide();
$('.window').hide();
$.cookie("modal", "true", { path: '/', expires: 7 });
});

}
});
function launchWindow(id) {


    //Get the screen height and width
    var maskHeight = $(document).height();
    var maskWidth = $(window).width();

    //Set height 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.8);  

    //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); 
}

This is the updated code of script you are using i have set the cookie for 10 minute in this code. You can change the cookie time as per your need.

<!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>Simple JQuery Modal Window from Queness</title>

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.pack.js"></script>
<script>

$(document).ready(function() {  

//if the cookie hasLaunch is not set, then show the modal window
if (!readCookie('hasLaunch')) {
    //launch it
    launchWindow('#dialog2');       
    //then set the cookie, so next time the modal won't be displaying again.
    createCookie('hasLaunch', 1, 1);
}

//if close button is clicked
$('.window #close').click(function () {
    $('#mask').hide();
    $('.window').hide();
});     

//if mask is clicked
$('#mask').click(function () {
    $(this).hide();
    $('.window').hide();
});         


$(window).resize(function () {

    var box = $('#boxes .window');

    //Get the screen height and width
    var maskHeight = $(document).height();
    var maskWidth = $(window).width();

    //Set height and width to mask to fill up the whole screen
    $('#mask').css({'width':maskWidth,'height':maskHeight});

    //Get the window height and width
    var winH = $(window).height();
    var winW = $(window).width();

    //Set the popup window to center
    box.css('top',  winH/2 - box.height()/2);
    box.css('left', winW/2 - box.width()/2);

}); 

});

function createCookie(name,value,days) {
if (days) {
    var date = new Date();
    //date.setTime(date.getTime()+(days*24*60*60*1000));
    date.setTime(date.getTime()+(10*60*1000));
    var expires = "; expires="+date.toGMTString();
}
else var expires = "";
document.cookie = name+"="+value+expires+"; path=/";
}

function readCookie(name) {
var nameEQ = name + "=";
var ca = document.cookie.split(';');
for(var i=0;i < ca.length;i++) {
    var c = ca[i];
    while (c.charAt(0)==' ') c = c.substring(1,c.length);
    if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
}
return null;
}

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.8);  

    //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());
    $(id).css('left', winW/2-$(id).width()/2);

    //transition effect
    $(id).fadeIn(2000); 


}

</script>

<style>
body {
font-family:verdana;
font-size:15px;
}

a {color:#333; text-decoration:none}
a:hover {color:#ccc; text-decoration:none}

#mask {
  position:absolute;
  left:0;
  top:0;
  z-index:9000;
  background-color:#000;
  display:none;
}

#boxes .window {
  position:fixed;
  width:440px;
  height:200px;
  display:none;
  z-index:9999;
  padding:20px;
}

#boxes #dialog {
  width:375px; 
  height:203px;
  padding:10px;
  background-color:#ffffff;
}

#boxes #dialog1 {
  width:375px; 
  height:203px;
}

#dialog1 .d-header {
  background:url(images/login-header.png) no-repeat 0 0 transparent; 
  width:375px; 
  height:150px;
}

#dialog1 .d-header input {
  position:relative;
  top:60px;
  left:100px;
  border:3px solid #cccccc;
  height:22px;
  width:200px;
  font-size:15px;
  padding:5px;
  margin-top:4px;
}

#dialog1 .d-blank {
  float:left;
  background:url(images/login-blank.png) no-repeat 0 0 transparent; 
  width:267px; 
  height:53px;
}

#dialog1 .d-login {
  float:left;
  width:108px; 
  height:53px;
}

#boxes #dialog2 {
  background:url(images/notice.png) no-repeat 0 0 transparent; 
  width:326px; 
  height:229px;
  padding:50px 0 20px 25px;
}
</style>
</head>
<body>
<h2><a href="http://www.queness.com">Simple jQuery Modal Window Examples from Queness WebBlog</a></h2>

<ul>
<li><a href="http://www.queness.com">Normal Link</a></li>
<li><a href="#dialog" name="modal">Simple Window Modal</a></li>
<li><a href="#dialog1" name="modal">Login Dialog Box</a></li>
<li><a href="#dialog2" name="modal">Sticky Note</a></li>
</ul>

<div style="font-size:10px;color:#ccc">Except where otherwise noted, content on this site is licensed under a Creative Commons Attribution 3.0 License.</div>

<div id="boxes">

<div id="dialog" class="window">
Simple Modal Window | 
<a href="#"class="close"/>Close it</a>
</div>

<!-- Start of Login Dialog -->  
<div id="dialog1" class="window">
  <div class="d-header">
    <input type="text" value="username" onclick="this.value=''"/><br/>
    <input type="password" value="Password" onclick="this.value=''"/>    
  </div>
  <div class="d-blank"></div>
  <div class="d-login"><input type="image" alt="Login" title="Login" src="images/login-button.png"/></div>
</div>
<!-- End of Login Dialog -->  



<!-- Start of Sticky Note -->
<div id="dialog2" class="window">
  So, with this <b>Simple Jquery Modal Window</b>, it can be in any shapes you want!     Simple and Easy to modify : ) <br/><br/>
<input type="button" value="Close it" class="close"/>
</div>
<!-- End of Sticky Note -->



<!-- Mask to cover the whole screen -->
  <div id="mask"></div>
</div>



</body>
</html>