简单模式窗口+；jquerycookie_Jquery_Cookies_Modal Window

简单模式窗口+；jquerycookie

jquery cookies

简单模式窗口+；jquerycookie,jquery,cookies,modal-window,Jquery,Cookies,Modal Window,我使用这个插件来显示一个模式窗口。我还使用jQuery Cookie插件（jQuery.Cookie.js）设置Cookie。如何混合使用jQuery简单模式窗口和jQuery Cookie？有必要在点击“继续”按钮后，设置cookie，用户不会看到未来的模式窗口。对不起，我只是初学者这是我的代码： <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD

我使用这个插件来显示一个模式窗口。我还使用jQuery Cookie插件（jQuery.Cookie.js）设置Cookie。如何混合使用jQuery简单模式窗口和jQuery Cookie？有必要在点击“继续”按钮后，设置cookie，用户不会看到未来的模式窗口。对不起，我只是初学者

这是我的代码：

<!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>


$（文档）.ready（函数（）{
//输入要显示的DIV id
启动窗口（“警报”）；
//如果单击“关闭”按钮
$（'.window.close'）。单击（函数（e）{
$（“#掩码”）.hide（）；
$（'.window'）.hide（）；
});  
});
//如果单击“关闭”按钮
$（'.window.close'）。单击（函数（e）{
//取消链接行为
e、 预防默认值（）；
$（“#掩码”）.hide（）；
$（'.window'）.hide（）；
});  
//如果单击了“遮罩”
$（“#掩码”）。单击（函数（）{
$（this.hide（）；
$（'.window'）.hide（）；
});
函数启动窗口（id）{
//获取屏幕的高度和宽度
var maskHeight=$（document.height（）；
var maskWidth=$（window.width（）；
//设置遮罩的高度和宽度以填充整个屏幕
$（'#mask'）.css（{'width'：maskWidth，'height'：maskHeight}）；
//过渡效应
$（'面具'）.fadeIn（1000）；
$（#mask'）.fadeTo（“慢”，0.95）；
//获取窗口的高度和宽度
var winH=$（window.height（）；
var winW=$（window.width（）；
//将弹出窗口设置为居中
$（id）.css（'top'，winH/2-$（id）.height（）/2）；
$（id）.css（'left'，winW/2-$（id）.width（）/2）；
//过渡效应
美元（id）.fadeIn（2000年）；
}
$（函数（）
{
$（“#按钮”）。单击（函数（e）
{
$.cookie（'the_cookie'，'1'，{expires:999}）；
});
});
一些文字。。。

如果设置了cookie，则不要调用launchWindow（）

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

使用此脚本更改您的脚本，并包括最新的jquery和cookie脚本。它会很好用的

 $(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); 
}

这是您正在使用的脚本的更新代码，我已在此代码中将cookie设置为10分钟。您可以根据需要更改cookie时间

<!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>


来自Queness的简单JQuery模式窗口
$（文档）.ready（函数（）{
//如果未设置cookie hasLaunch，则显示模式窗口
如果（！readCookie（'hasLaunch'））{
//发射
启动窗口（“#对话框2”）；
//然后设置cookie，以便下次不再显示模式。
createCookie（'hasLaunch'，1,1）；
}
//如果单击“关闭”按钮
$（'.window#close'）。单击（函数（）{
$（“#掩码”）.hide（）；
$（'.window'）.hide（）；
});     
//如果单击了“遮罩”
$（“#掩码”）。单击（函数（）{
$（this.hide（）；
$（'.window'）.hide（）；
});         
$（窗口）。调整大小（函数（）{
var-box=$（'#box.window'）；
//获取屏幕的高度和宽度
var maskHeight=$（document.height（）；
var maskWidth=$（window.width（）；
//设置遮罩的高度和宽度以填充整个屏幕
$（'#mask'）.css（{'width'：maskWidth，'height'：maskHeight}）；
//获取窗口的高度和宽度
var winH=$（window.height（）；
var winW=$（window.width（）；
//将弹出窗口设置为居中
css（'top'，winH/2-box.height（）/2）；
css（'left'，winW/2-box.width（）/2）；
}); 
});
函数createCookie（名称、值、天数）{
如果（天）{
变量日期=新日期（）；
//date.setTime（date.getTime（）+（天*24*60*60*1000））；
date.setTime（date.getTime（）+（10*60*1000））；
var expires=“；expires=“+date.togmString（）；
}
else var expires=“”；
document.cookie=name+“=”+value+expires+“path=/”；
}
函数readCookie（名称）{
变量nameEQ=name+“=”；
var ca=document.cookie.split（“；”）；
对于（变量i=0；i





除非另有说明，本网站上的内容是根据知识共享署名3.0许可证授权的。
简单模态窗口


因此，使用这个简单的Jquery模式窗口，它可以是您想要的任何形状！简单易修改：）

是的，它很有效！问题在我手上安佛，非常感谢你！