页面覆盖以显示一条信息，照片或者常见的登录，广告，

实例：

<!DOCTYPE html>

<html>

<head>

  <meta charset="utf-8">

  <meta name="viewport" content="width=device-width">

  <title>JS Bin</title>

  <style>

    .overlay{

      background-color:#000;

      opacity:.5;

      filter:alpha(opacity=50);

      position:fixed;

      top:0;left:0;

      width:100%;height:100%;

      z-index:10;

    }

    .overlaymsg{

      position:absolute;

      background-color:yellow;

      padding:10px;

      width:200px;

      height:200px;

      font-size:2em;

      z-index:11;

      top:50%;

      left:50%;

      margin-left:-100px;

      margin-top:-100px;

    }

  </style>

  <script>

     function displayPopup(){

       var overlay = document.createElement("div");

       overlay.setAttribute("id","overlay");

       overlay.setAttribute("class","overlay");

       document.body.appendChild(overlay);

       var msg = document.createElement("div");

       var txt = document.createTextNode("please join our mailing list!(click to close)");

       msg.appendChild(txt);

       msg.setAttribute("id","msg");

       msg.setAttribute("class","overlaymsg");

       msg.onclick = restore;

       document.body.appendChild(msg);

     }

    function restore(){

      document.body.removeChild(document.getElementById("overlay"));

      document.body.removeChild(document.getElementById("msg"));

    }

    window.onload = function(){

      displayPopup();

    }

  </script>

</head>

<body>

<p>Existing material.</p>

</body>

</html>

特点：覆盖整个web页面，设置遮布（样式overlay）的宽高为100%，要能看见底部的信息，设置透明度：opacity：.5;filter:alpha(opacity=50);

　　　　消息显示(样式overlaymsg)设置要在遮布之上，设置z-index 的值远大于遮布，居中显示，设置左边距和上边距50%。

　　　　最后一个要确保上下滚动鼠标时，样式一致，设置遮布定位方式为：fixed；

显示隐藏页面：

*.style.hidden = "visible";

*.style.hidden = "hidden";

特点：任然占用了物理空间，影响其他的元素，

*.style.display = "block";

*.style.display = "none";

特点：完全从页面布局中删除了该元素，

display其他的属性值：inline-block  内容像一个块级元素格式化，然后像内联元素排练

　　　　inherit   默认显示，继承该元素的父节点

补充：

块元素：div  , p  , form,   ul,  li ,  ol, dl,   address,  fieldset,  hr, menu,  table

行内元素：span,   strong,   em, img ,  input,  select,  textarea,

js学习进阶-页面覆盖的更多相关文章

  1. js学习进阶中-bind()方法

    有次面试遇到的,也是没说清楚具体的作用,感觉自己现在还是没有深刻的理解! bind():绑定事件类型和处理函数到DOM element(父元素上) live():绑定事件到根节点上,(document ...

  2. js学习进阶-元素获取及样式设置

    var imgs = document.querySelectorAll("article img"); 获得article元素的直接或间接子孙的所有img元素, <arti ...

  3. JS学习之页面加载

    1.window.opener.location.reload();     意思是让打开的父窗口刷新.window.opener指的是本窗口的父窗口,window.opener.location.h ...

  4. JS学习进阶中 come on!

    1,定义新的属性来扩展对象 新方法:defineProperty() 实例: var data = {}: Object.defineProperty(data,"type",{ ...

  5. Ext JS学习第十六天 事件机制event（一） DotNet进阶系列(持续更新) 第一节：.Net版基于WebSocket的聊天室样例 第十五节：深入理解async和await的作用及各种适用场景和用法 第十五节：深入理解async和await的作用及各种适用场景和用法 前端自动化准备和详细配置(NVM、NPM/CNPM、NodeJs、NRM、WebPack、Gulp/Grunt、G

    code&monkey   Ext JS学习第十六天 事件机制event(一) 此文用来记录学习笔记: 休息了好几天,从今天开始继续保持更新,鞭策自己学习 今天我们来说一说什么是事件,对于事件 ...

  6. Node.js学习看这里：基础、进阶、文章

    Node.js是基于Chrome JavaScript运行时建立的一个平台,实际上它是对Google Chrome V8引擎进行了封装,它主要用于创建快速的.可扩展的网络应用. Node.js采用事件 ...

  7. vue.js学习之 打包为生产环境后，页面为白色

    vue.js学习之 打包为生产环境后,页面为白色 一:配置问题 当我们将项目打包为生产环境后,在dist文件夹下打开index.html,会发现页面为白色. 1:打开config>index.j ...

  8. 【原创】分布式之数据库和缓存双写一致性方案解析(三) 前端面试送命题（二）-callback，promise，generator，async-await JS的进阶技巧 前端面试送命题（一）-JS三座大山 Nodejs的运行原理-科普篇 优化设计提高sql类数据库的性能 简单理解token机制

    [原创]分布式之数据库和缓存双写一致性方案解析(三)   正文 博主本来觉得,<分布式之数据库和缓存双写一致性方案解析>,一文已经十分清晰.然而这一两天,有人在微信上私聊我,觉得应该要采用 ...

  9. 【转】Backbone.js学习笔记（二）细说MVC

    文章转自: http://segmentfault.com/a/1190000002666658 对于初学backbone.js的同学可以先参考我这篇文章:Backbone.js学习笔记(一) Bac ...

随机推荐

  1. Leetcode 45. Jump Game II

    Given an array of non-negative integers, you are initially positioned at the first index of the arra ...

  2. js修改伪类的值

    css文件 p.change:after { content: attr(data-content); } js文件 $(this).addClass('change').attr('data-con ...

  3. Beta阶段第七次Scrum Meeting

    Beta阶段第七次Scrum Meeting 情况简述 BETA阶段第七次Scrum Meeting 敏捷开发起始时间 2016/12/20 00:00 敏捷开发终止时间 2016/12/21 00: ...

  4. bzoj 4320: ShangHai2006 Homework

    4320: ShangHai2006 Homework Time Limit: 10 Sec Memory Limit: 128 MB Description 1:在人物集合 S 中加入一个新的程序员 ...

  5. BP神经网络原理及python实现

    [废话外传]:终于要讲神经网络了,这个让我踏进机器学习大门,让我读研,改变我人生命运的四个字!话说那么一天,我在乱点百度,看到了这样的内容: 看到这么高大上,这么牛逼的定义,怎么能不让我这个技术宅男心 ...

  6. web前端基础知识-（八）Django进阶之数据库对象关系映射

    Django ORM基本配置 到目前为止,当我们的程序涉及到数据库相关操作时,我们一般都会这么搞: 创建数据库,设计表结构和字段 使用 MySQLdb 来连接数据库,并编写数据访问层代码 业务逻辑层去 ...

  7. document.compatMode属性

    document.compatMode用来判断当前浏览器采用的渲染方式. 官方解释: BackCompat:标准兼容模式关闭.CSS1Compat:标准兼容模式开启. 当document.compat ...

  8. .NET使用NPOI2.0导入导出Excel

    NPOI开源地址:http://npoi.codeplex.com/ NPOI教程: http://tonyqus.sinaapp.com/ 具体的不在这里写了,感兴趣的可以去官网. 先来说导出的例子 ...

  9. JSP学习网站

    JSP学习网站 http://www.yiibai.com/jstl/ http://www.w3cschool.cc/jsp/jsp-jstl.html

  10. Thinkphp 3.2.2 验证码check_verify方法，只能验证一次

    问题: Thinkphp 3.2.2 验证码check_verify方法,只能验证一次. function check_verify($code, $id = ''){ $verify = \Thin ...