如何设置div弹窗一天内只弹出一次 js

时间:2024-10-12 16:42:31

1、要实现弹窗一天只弹一次,需要依靠cookie来实现。而使用原生javascript操作cookie,代码会稍显复杂,所以这里借助枣娣空郅jquery来实现。首先下载jquery.js和jquery.cookie.js两个文件(也可以直接引用其它网站上的这两个文件)。

如何设置div弹窗一天内只弹出一次 js

2、然后新建一个网页用于演示。网页中有一个<div>层,层中有一个<span>块,块中内容为字母“X”,用做弹出窗口的关闭按钮。并将第一步中下载的两个jquery文件引入。

如何设置div弹窗一天内只弹出一次 js

3、再为div标签添加一个css样式pop_windows,并在<head>标签中加入相关样式的定义,实现div层初始时不可见。可见状态下div层的CSS效果如下:

如何设置div弹窗一天内只弹出一次 js
如何设置div弹窗一天内只弹出一次 js
如何设置div弹窗一天内只弹出一次 js

4、再在<body>标签中,加入javascript脚本引入标签<script></script>。

如何设置div弹窗一天内只弹出一次 js

5、在<script>标签对中,加入span标签的点击事件:点击关闭(隐藏犬匮渝扮)父对象,并写cookie,其中$.cookie("isClose",'yes',{expires:1}) 表示在cookie中写入一对键值(键为isClose,值为yes),键值的有效期为1天,即第二天这个键值失效。

如何设置div弹窗一天内只弹出一次 js

6、再在<script>标签对中,加入cookie键值的判断条件,如果存在键为isClose,值为yes的cookie,则不弹出div层,否则弹出div层。

如何设置div弹窗一天内只弹出一次 js

7、保存后,在浏览器中运行效果如下图,每天只弹出一次div层。大家可以根据需要,增加弹出层的弹出效果或让弹出层更加美观。

如何设置div弹窗一天内只弹出一次 js
如何设置div弹窗一天内只弹出一次 js
© 手抄报圈