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

实例:

<!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. react 表单

    import React ,{PropTypes}from 'react'; import { render } from 'react-dom'; const styles={ mb10:{ mar ...

  2. HTML5 之 FileReader(图片上传)

    1.FileReader接口的方法 FileReader接口有4个方法,其中3个用来读取文件,另一个用来中断读取.无论读取成功或失败,方法并不会返回读取结果,这一结果存储在result属性中. Fil ...

  3. 【bzoj1415】 Noi2005—聪聪和可可

    http://www.lydsy.com/JudgeOnline/problem.php?id=1415 (题目链接) 题意 一张图,聪聪想吃可可.每单位时间聪聪可以先移动两次:可可后移动一次或停在原 ...

  4. javascript创建多行字符串的方法(转)

    JS里并没有标准的多行字符串的表示方法,但是在用模板的时候,为了保证模板的可阅读性,我们又不可避免的使用多行字符串,所以出现了各种搞法,这里以一段jade的模板作为示例,简单总结和对比一下. 一.字符 ...

  5. Oracle 性能优化

    (1)      选择最有效率的表名顺序(只在基于规则的优化器中有效):ORACLE的解析器按照从右到左的顺序处理FROM子句中的表名,FROM子句中写在最后的表(基础表 driving table) ...

  6. 1 python大数据挖掘系列之基础知识入门

    preface Python在大数据行业非常火爆近两年,as a pythonic,所以也得涉足下大数据分析,下面就聊聊它们. Python数据分析与挖掘技术概述 所谓数据分析,即对已知的数据进行分析 ...

  7. HD3033I love sneakers!(分组背包+不懂)

    I love sneakers! Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others) ...

  8. Windows常用快捷方式

    总结了其他常用的快捷方式: Ctrl+C 复制 . Ctrl+V粘贴. Ctrl+X剪切. Delete删除. Alt+Tab 应用程序切换 Ctrl+Alt+Delete  Ctrl+shift+E ...

  9. vue2.0---组件

    什么是组件? 组件是vue.js最强大的功能之一.它可以扩展HTML元素,封装可重用的代码.在更高的层次上,组件是自定义的元素,vue的编译器给它添加特殊功能.其实在有些情况下,组件也可以是原生HTM ...

  10. wireshark抓包工具简介以及tcp三次握手的一些含义

    wireshark是非常流行的网络封包分析软件,功能十分强大.可以截取各种网络封包,显示网络封包的详细信息.使用wireshark的人必须了解网络协议,否则就看不懂wireshark了.为了安全考虑, ...