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

实例：

<!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. BZOJ 2006: [NOI2010]超级钢琴

    2006: [NOI2010]超级钢琴 Time Limit: 20 Sec  Memory Limit: 552 MBSubmit: 2613  Solved: 1297[Submit][Statu ...

  2. Netty 系列之 Netty 高性能之道

    1. 背景 1.1. 惊人的性能数据 最近一个圈内朋友通过私信告诉我,通过使用 Netty4 + Thrift 压缩二进制编解码技术,他们实现了 10 W TPS(1 K 的复杂 POJO 对象)的跨 ...

  3. Linux 下 ---ThinkPHP 图片上传提示：上传根目录不存在！请尝试手动创建

    2016年11月15日11:15:47 Windows下如果碰到如此问题,要看文件保存根路径里的rootpath,比如ThinkPHP框架里config.php文件里的的参数配置: //文件上传相关配 ...

  4. struts-validate.xml配置详解demo

    <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE validators PUBLIC &quo ...

  5. 响应式布局-Rem的用法

    前言: 文章较为系统地介绍了rem这个新的文字大小单位,绝对干货,绝对好文.转载时略有改动.   先来看看一些基本理念,比如: 响应式网页不仅仅是响应不同类型的设备,而且需要响应不同的用户需求.响应式 ...

  6. ionic ios iframe 白屏

    之前碰到一个问题: 在ios下边使用iframe出现白屏问题 android下边正常 原因是ios对app打开外部网页有限制需要取消限制 解决方法 1.确认添加whitelist 插件 2.在conf ...

  7. Thymeleaf

    1.在html顶部添加 <html xmlns:th="http://www.thymeleaf.org"> 2.url表达式 @{...} <link rel= ...

  8. SQL中distinct的用法

    SQL中distinct的用法   1.作用于单列 2.作用于多列 3.COUNT统计 4.distinct必须放在开头 5.其他 在表中,可能会包含重复值.这并不成问题,不过,有时您也许希望仅仅列出 ...

  9. SQL中部分语法整理

    1.SELECT DISTINCT 语句 关键词DISTINCT用于返回唯一不同的值. 语法: SELECT DISTINCT 列名称 FROM 表名称 2.SELECT INTO语句 SELECT ...

  10. jexus5.8.2 linux x64通用版[未集成mono] 配置https

    一.找到mono安装位置 sudo find / -name mono 二.首先查看"/lib"或"/usr/lib"等系统库文件夹中是否有SSL库文件的名字, ...