<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

  <html xmlns="http://www.w3.org/1999/xhtml" >

 <head>

     <title>DIV CSS遮罩层</title>

     <script language="javascript" type="text/javascript">

         function showdiv() {

             document.getElementById("bg").style.display = "block";

             document.getElementById("show").style.display = "block";

         }

         function hidediv() {

             document.getElementById("bg").style.display = 'none';

             document.getElementById("show").style.display = 'none';

         }

     </script>

     <style type="text/css">

         #bg{ display: none;  position: absolute;  top: 0%;  left: 0%;  width: 100%;  height: 100%;  background-color: black;  z-index:1001;  -moz-opacity: 0.7;  opacity:.70;  filter: alpha(opacity=70);}

         #show{display: none;  position: absolute;  top: 25%;  left: 22%;  width: 53%;  height: 49%;  padding: 8px;  border: 8px solid #E8E9F7;  background-color: white;  z-index:1002;  overflow: auto;}

     </style>

 </head>

 <body>

     <input id="btnshow" type="button" value="Show" onclick="showdiv();" />

     <div id="bg"></div>

     <div id="show">测试

         <input id="btnclose" type="button" value="Close" onclick="hidediv();" />

     </div>

 </body>

 </html>
按 Ctrl+C 复制代码

Copy上面的代码到HTML页面即可查看效果。

原理比较简单，就是在页面内先定义好需要显示的DIV和遮罩层的CSS,然后用在onclick事件时，通过JS去控制两个DIV的样式：display='block' or display='none'.就可以实现DIV的显示和隐藏。

注意两个DIV的z-index，显示在最上面的DIV的z-index一定要比遮罩层的z-index大。

html js 遮罩层的更多相关文章

  1. JS遮罩层弹框效果

    对于前端开发者来说,js是不可缺少的语言.现在我开始把我日常积累的一些js效果或者通过搜索自己总结的一些效果分享给大家,希望能够帮助大家一起进步,也希望大家能够多多支持! 1.今天我先分享一个遮罩层弹 ...

  2. js 遮罩层 loading 效果

    //调用方法 //关闭事件<button onclick='LayerHide()'>关闭</button>,在loadDiv(text)中,剔除出来 //调用LayerSho ...

  3. js遮罩层弹出显示效果组件化

    1.在web开发中经常遇到遮罩层的效果,可以将这种常用方法通用化 function showid(idname){ var isIE = (document.all) ? true : false; ...

  4. JS遮罩层

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  5. js 遮罩层请稍后

    this.WaitMessage = function (msg) { $("<div class=\"datagrid-mask\"></div> ...

  6. js简单弹出层、遮罩层

    <html> <head> <title>js简单弹出层</title> <style> /*阴影边框效果*/ .box-shadow-1 ...

  7. JS+CSS简单实现DIV遮罩层显示隐藏【转藏】

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  8. 遮罩层的实现(纯js兼容版)

    这个代码是我以前测试时候的代码了,主要用到的知识点是opacity和filer分别实现 “标准浏览器”和IE浏览器下的半透明,使用js的document.body.offsetwidth 和scree ...

  9. js添加遮罩层

    直接用代码来说明 <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="MaskT ...

随机推荐

  1. PAT基础级-钻石段位样卷2-7-1 心理阴影面积 (5 分)

    这是一幅心理阴影面积图.我们都以为自己可以匀速前进(图中蓝色直线),而拖延症晚期的我们往往执行的是最后时刻的疯狂赶工(图中的红色折线).由红.蓝线围出的面积,就是我们在做作业时的心理阴影面积. 现给出 ...

  2. C#ThreadPool类—多线程

    标题:ThreadPool Class 地址:https://docs.microsoft.com/zh-cn/dotnet/api/system.threading.threadpool?redir ...

  3. 常见错误 RuntimeError: expected type torch.FloatTensor but got torch.cuda.FloatTensor

    https://www.jianshu.com/p/0be7a375bdbe https://blog.csdn.net/qq_38410428/article/details/82973895 计算 ...

  4. Mybatis3.1-[tp-30-31]-select_resultMap_关联查询_级联属性封装结果__association定义关联对象封装规则

    笔记要点 出错分析与总结 在全局配置中,映射dao包下的全部: <mapper> <package name="com.dao"/> </mapper ...

  5. 河南省acm第九届省赛--《表达式求值》--栈和后缀表达式的变形--手速题

    表达式求值 时间限制:1000 ms | 内存限制:65535 KB 难度:3   描述 假设表达式定义为:1. 一个十进制的正整数 X 是一个表达式.2. 如果 X 和 Y 是 表达式,则 X+Y, ...

  6. Bcompare 提示 “这个授权密钥已被吊销” 解决方法

    Bcompare 提示 “这个授权密钥已被吊销” 解决方法 打开文件夹 %appdata%\Scooter Software 找到相应的版本,例如 Beyond Compare 3 删除里面的 BCS ...

  7. 使用poi进行数据的导出Demo

    这是本人在项目中遇到了一个导出数据时,如果该条数据中包含汉字,就会出现excel单元格的大小与期望的样式不一样,也是查找了半天,也没有发现哪里出的问题. 现将一个小Demo奉献在这里,可以在遇到使用p ...

  8. Promise原理实现

    首先先看一下 promise 的调用方式: // 实例化 Promise: new MyPromise((resolve, reject) => { setTimeout(() => { ...

  9. 进击web与web协议

    我一直比较抵制web,web的各种协议以及后端与前端的交互,慢慢的发现除了数据和算法其实计算机软件方面还有另一块高地,那就是web协议. 十分感谢极客时间提供了性价比极高的课程,让我遇到了这么好的老师 ...

  10. postgresql sql查询结果添加序号列与每组第一个序号应用

    1.postgresql 查询每组第一个 ROW_NUMBER () OVER (partition by 字段 ORDER BY  字段  DESC) 写法:SELECT  ROW_NUMBER ( ...