如何利用js设置div弹窗一天内只弹出一次?js如果实现弹窗一天只弹一次?下面,小编就来给大家介绍一下实现方法!
工具/原料
jquery.js
jquery.cookie.js
方法/步骤
1、要实现弹窗一天只弹一次,需要依靠co艺皱麾酪okie来实现。而使用原生javascript操作cookie,代码会稍显复杂,所以这里借助枣娣空郅jquery来实现。首先下载jquery.js和jquery.cookie.js两个文件(也可以直接引用其它网站上的这两个文件)。
2、然后新建一个网页用于演示。网页中有一个<div>层,层中有一个<span>块,块中内容为字母“X”,用做弹出窗口的关闭按钮。并将第一步中下载的两个jquery文件引入。
3、再为div标签添加一个css样式pop_windows,并在<head>标签中加入相关样式的定义,实现div层初始时不可见。可见状态下div层的CSS效果如下:
4、再在<body>标签中,加入javascript脚本引入标签<script></script>。
5、在<script>标签对中,加入span标签的点击事件:点击关闭(隐藏犬匮渝扮)父对象,并写cookie,其中$缕计瓤账.cookie("isClose",'yes',{expires:1})表示在cookie中写入一对键值(键为isClose,值为yes),键值的有效期为1天,即第二天这个键值失效。
6、再在<script>标签对中,加入cookie键值的判断条件,如果存在键为isClose,值为yes的cookie,则不弹出div层,否则弹出div层。
7、保存后,在浏览器中运行效果如下图,每天只弹出一次div层。大家可以根据需要,增加弹出层的弹出效果或让弹出层更加美观。