养生 装修 购物 美食 感冒 便秘 营销 加盟 小吃 火锅 管理 创业 搭配 减肥 培训 旅游

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

时间:2024-11-15 17:38:59

如何利用js设置div弹窗一天内只弹出一次?js如果实现弹窗一天只弹一次?下面,小编就来给大家介绍一下实现方法!

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

工具/原料

jquery.js

jquery.cookie.js

方法/步骤

1、要实现弹窗一天只弹一次,需要依靠co艺皱麾酪okie来实现。而使用原生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

© 一点知识