.打开页面自动弹出  当关闭弹框的时候  设置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. 华为Fusioncompute 6.5.1

    V6.5.1VRM“gandalf”用户的默认密码为“IaaS@OS-CLOUD9!”.CNA“gandalf”用户的默认密码为“IaaS@OS-CLOUD8!”.普通模式:admin/LaaS@PO ...

  2. Eureka 分析记录

    本文是一些记录和想方法,分析大部分来自 http://www.iocoder.cn/Eureka/ 感兴趣的可以去看一下.

  3. 【ARM-Linux开发】Linux下查看机器的CPU负载

    负载(load)是Linux机器的一个重要指标,直观了反应了机器当前的状态.如果机器负载过高,那么对机器的操作将难以进行. Linux的负载高,主要是由于CPU使用.内存使用.IO消耗三部分构成.任意 ...

  4. ue-cli3 取消eslint校验代码

    参考链接:https://www.cnblogs.com/sjie/p/9884362.html

  5. 删除Vue中无权限的【node_modules】文件

    npm install rimraf -g rimraf node_modules

  6. Redis 使用指南：深度解析 info 命令

    Redis 是一个使用  ANSI C 编写的开源.基于内存.可选持久性的键值对存储数据库,被广泛应用于大型电商网站.视频网站和游戏应用等场景,能够有效减少数据库磁盘 IO, 提高数据查询效率,减轻管 ...

  7. 待解决问题 jscore 与 node.js jsbridge

    jscore 与 node.js  jsbridge https://juejin.im/post/5b395eb96fb9a00e556123ef

  8. Python取值的灵活性用法

    samp_string = "Whatever you are, be a good one." for i in samp_string: print(i) ,len(samp_ ...

  9. dev linechart动态加载数据（像股票一样的波动）

    图片地址:https://blog.csdn.net/qq_33459369/article/details/80060196:(盗图) 接下来是封装的代码 #region 动态折线图 public ...

  10. 微信小程序在组件中获取界面上的节点信息wx.createSelectorQuery

    节点信息查询 API 可以用于获取节点属性.样式.在界面上的位置等信息. 最常见的用法是使用这个接口来查询某个节点的当前位置,以及界面的滚动位置. 示例代码: const query = wx.cre ...