js学习进阶-页面覆盖

时间：2022-09-03 12:45:49

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

实例：

<!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&lpar;&rpar;方法

    有次面试遇到的,也是没说清楚具体的作用,感觉自己现在还是没有深刻的理解! 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&excl;

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

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

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

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

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

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

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

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

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

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

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

随机推荐

  1. IIS Express中如何配置支持json

    今天在使用i18next的时候,由于要加载一个json的文件,但是在vs2013中一直加载不成功呢,经过上网查资料得知原来要配置iis express才能支持json文件的加载. 文件的默认位置在:C ...

  2. typedef和define的详细区别

    typedef是一种在计算机编程语言中用来声明自定义数据类型,配合各种原有数据类型来达到简化编程的目的的类型定义关键字. #define是预处理指令.下面让我们一起来看. typedef是C语言语句, ...

  3. SQL笔记 --- 数据库设计步骤&lpar;转&rpar;

    SQL笔记 --- 数据库设计步骤 目录 总体设计过程需求分析概念结构设计逻辑结构设计数据库物理设计数据库实施数据库运行和维护 总体设计过程 0 » 下一篇:vim 命令集 posted @ 2012 ...

  4. Effective C&plus;&plus; ——构造&sol;析构&sol;赋值运算符

    条款五:了解C++默认编写并调用那些函数 是否存在空的类? 假设定义类为class Empty{}:当C++编译器处理过后会变成如下的形式: class Empty{ Empty(){} ~Empty ...

  5. 哆啦A梦css

    <!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  6. Html5 标签二（超链接）

    1.五种超链接形式 2.超链接属性 一 五种超链接 <!DOCTYPE html> <html lang="en"> <head> <me ...

  7. php 数组指定位置插入数据单元

      PHP array_splice() 函数 array_splice(array,offset,length,array) 参数 描述 array 必需.规定数组. offset 必需.数值.如果 ...

  8. Linux内核系统体系概述

    Linux 内核主要由 5 个模块构成,它们分别是: 进程调度模块 用来负责控制进程对 CPU 资源的使用.所采取的调度策略是各进程能够公平合理地访问 CPU,同时保证内核能及时地执行硬件操作. 内存 ...

  9. android开发&lpar;27&rpar; 看看我的手机里都有什么传感器

    想看看我的HTC ONE x 具有什么传感器.写个代码RUN一下. 代码很简单,直接贴了 package zyf.demo.sensordemo; import java.util.List; imp ...

  10. 沉淀再出发&colon;Bean&comma;JavaBean&comma;POJO&comma;VO&comma;PO&comma;EJB等名词的异同

    沉淀再出发:Bean,JavaBean,POJO,VO,PO,EJB等名词的异同 一.前言 想必大家都有这样的困惑,接触的东西越多却越来越混乱了,这个时候就要进行对比和深入的探讨了,抓住每一个概念背后 ...

相关文章