.打开页面自动弹出  当关闭弹框的时候  设置cookie生存时间  再次刷新页面判断cookie是否失效

<html>

<head>

<meta charset="utf-8" />

  <title>LIGHTBOX EXAMPLE</title>

  <style>

   .black_overlay{ display: none; position: absolute; top: 0%; left: 0%; width: 100%; height: 100%; background-color: black; z-index:1001; -moz-opacity: 0.6; opacity:.60; filter: alpha(opacity=60); }

   .white_content { display: none; position: absolute; top: 25%; left: 25%; width: 50%; height: 50%; /*padding: 16px;*/ /*border: 16px solid orange;*/border: 1px solid grey; background-color: white; z-index:1002; /*overflow: auto; */}

   </style>

   <script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>

   <script>

　 

   $( document).ready(function(){

//判断cookie是否存在

    if(document.cookie.length <=0){

       one();

     }else{

      return '';

     }

      });

   function one(){

     document.getElementById('light').style.display='block';

    document.getElementById('fade').style.display='block'

    }

   function two(){

    document.getElementById('light').style.display='none';

    document.getElementById('fade').style.display='none'

    //关闭弹框是设置cookie

    setCookie('opop','lailailai',1800)

       }

    //设置cookie

    function setCookie(cname, cvalue, exdays) {

     var d = new Date();

     d.setTime(d.getTime() + (exdays*24*60*60*1000));

     var expires = "expires="+d.toUTCString();

     document.cookie = cname + "=" + cvalue + "; " + expires;

    }

    //获取cookie

    function getCookie(cname) {

     var name = cname + "=";

     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);

      if (c.indexOf(name) != -1) return c.substring(name.length, c.length);

     }

     return "";

    }

         </script>

</script>

</head>

<body >

  <p>

    <a href="javascript:showBg();" onclick="one()">点击这里打开窗口</a>

  </p>

  <div id="light" class="white_content">

   <img src="http://imageavatar.xiangsibang.com/gfs.php?img=9cdbc343a8846bba79b55a7c523f9b4f&w=800" style="width:100%;height:100%;">

    <a href="javascript:void(0)" onclick="two()" style="   color:red;margin-top: -50%; position: absolute;float: right;/* margin-right: -34%; */margin-left: 99%;">X</a>

  </div>

  <div id="fade" class="black_overlay" >

  </div>

</body>

</html>

　　

javascript只弹出一次框 再次刷新不弹出的更多相关文章

  1. 请写出一段JavaScript代码，要求页面有一个按钮，点击按钮弹出确认框。程序可以判断出用

    请写出一段JavaScript代码,要求页面有一个按钮,点击按钮弹出确认框.程序可以判断出用 户点击的是“确认”还是“取消”. 解答: <HTML> <HEAD> <TI ...

  2. Bootstrap学习5--bootstrap中的模态框（modal，弹出层）

    bootstrap中的模态框(modal),不同于Tooltips,模态框以弹出对话框的形式出现,具有最小和最实用的功能集. 务必将模态框的 HTML 代码放在文档的最高层级内(也就是说,尽量作为 b ...

  3. 解决PL/SQL Dev连接Oracle弹出空白提示框

    第一次安装Oracle,装在虚拟机中,用PL/SQL Dev连接远程数据库的时候老是弹出空白提示框,网上找了很久,解决方法也很多,可是就是没法解决我这种情况的. 没办法,只能自己研究,经过大概一天时间 ...

  4. PropertyGrid—为复杂属性提供下拉式编辑框和弹出式编辑框

    零.引言 PropertyGrid中我们经常看到一些下拉式的编辑方式(Color属性)和弹出式编辑框(字体),这些都是为一些复杂的属性提供的编辑方式,本文主要说明如何实现这样的编辑方式. 一.为属性提 ...

  5. PL/SQL Dev连接Oracle弹出空白提示框的解决方法分享

    第一次安装Oracle,装在虚拟机中,用PL/SQL Dev连接远程数据库的时候老是弹出空白提示框,网上找了很久,解决方法也很多,可是就是没法解决我这种情况的. 出现这种问题,解决方法大概有这几种: ...

  6. asp.net导出excel并弹出保存提示框

    asp.net导出excel并弹出保存提示框 2013-07-12 | 阅:1  转:78   |  分享  腾讯空间 人人网 开心网 新浪微博 腾讯微博 搜狐空间 推荐给朋友 举报          ...

  7. [UWP]在应用退出时弹出确认提示框

    1. 需求 在应用退出时(点击右上角的关闭按钮)弹出一个确认按钮可以说是一个最常见的操作了,例如记事本的"你是否保存": 但这个功能在UWP上居然有点小复杂.这篇文章将解释如何实现 ...

  8. 弹出JS提示框

    弹出JS提示框Page.ClientScript.RegisterStartupScript(typeof(string), "msg", "<script> ...

  9. Asp.Net下载页面,并弹出下载提示框

    Asp.Net下载页面,并弹出下载提示框.在删除按钮里调用以下方法.

随机推荐

  1. 我是如何提高工作效率的-工具篇（一）-Clover

    痛点: 还在为资源管理器窗口切来切去烦恼吗? 效果图: 实现工具:Clover 放个链接 链接:https://pan.baidu.com/s/1UiUQZtE99fMNDe1f2gOnlg   提取 ...

  2. spring 机制 扫描包

    控制器示例 扫描包注解代码 @SpringBootApplication(scanBasePackages = {"cn.maxhou.*"}) 引号内为包名,支持*通配符 为什么 ...

  3. [转帖]什么是WAL？

    什么是WAL? https://www.cnblogs.com/hzmark/p/wal.html 原来数据库与消息中间件 用的是相同的模式 都是基于 顺序写的性能优于 离散写 series 强于sc ...

  4. SQL Server事务(二)

    事务的四大特性: 1.原子性:原子性是指事务包含的所有操作要么全部成功,要么全部失败回滚,这和前面两篇博客介绍事务的功能是一样的概念,因此事务的操作如果成功就必须要完全应用到数据库,如果操作失败则不能 ...

  5. IDEA插件之CheckStyle

    1.是个啥? CheckStyle是一个检测代码格式是否满足规范的工具,其中用得比较多的是Google规范和Sun规范 2.下载安装插件 File -> Settings -> Plugi ...

  6. （七）RequestMapping 和 Controller方法

    文章目录 @[toc] RequestMapping功能 controller 方法返回值 RequestMapping功能 url映射 在定义 Controller 的,我们在方法上面,使用 @Re ...

  7. Django Rest Framework 安装

    1. 环境要求 Python (3.5, 3.6, 3.7): 查看 python版本:python -V Django (1.11, 2.0, 2.1, 2.2) 查看django版本:pip li ...

  8. linux 安装apache

    APR and APR-Util包 下载地址:http://apr.apache.org PCRE 下载地址:http://www.pcre.org Apache Server2.4 下载地址:htt ...

  9. 怎样在Chrome浏览器上安装 Vue Devtools 扩展程序

    第一步: 前往 GitHub 下载 Vue Devtools 项目文件 https://github.com/vuejs/vue-devtools 注意: 1. 将分支切换为 master 2. 下载 ...

  10. Jmeter4.0---- 测试数据说明（17）

    1.说明 jmeter工具对于请求的测试结果,有多种形式展现,但是数据比较难懂,现在针对不同的展现做具体的说明. 2.监听器 (一)图形结果 (1)样本数目:总共发到服务器的请求数 (2)最新样本:服 ...