当前位置： 文江博客话题详情

简单模态窗口 + jQuery Cookie

发布于 2024-10-02 21:31:16 字数 2422 浏览 6 评论 0原文

我使用这个插件 jQuery 简单模态窗口 显示模式窗口。我还使用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>
原文

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>

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论， 你可以免费 注册 一个本站的账号。

评论（3）

知你几分 2024-10-09 21:31:16

如果设置了 cookie，则不要调用 launchWindow()。

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

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

if(!$.cookie('the_cookie')){
  launchWindow('#alert');
}
回复 原文
篱下浅笙歌 2024-10-09 21:31:16

使用此脚本更改您的脚本，并包含最新的 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); 
}

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); 
}
回复 原文
讽刺将军 2024-10-09 21:31:16

这是您正在使用的脚本的更新代码，我已在此代码中将 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>

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>
回复 原文
~没有更多了~

关于作者

野侃

暂无简介

0 文章
0 评论
24 人气
发私信

相关话题

更多

热门标签

操作系统 程序设计 IT运维 Linux系统管理 JavaScript 服务器应用 solaris C/C++ PHP Shell BSD Vue.js aix Oracle Python HTML 系统管理 HTML5 CSS 前端
更多

推荐作者

娇女薄笑

文章 0 评论 0

biaggi

文章 0 评论 0

xiaolangfanhua

文章 0 评论 0

rivulet

文章 0 评论 0

我三岁

文章 0 评论 0

薆情海

文章 0 评论 0

更多

友情链接

文江博客
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站，即表示您同意使用 Cookies 和您的相关数据。
    原文