<!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. windows 数据备份

    xcopy 数据目录   备份目录  /e /c /q /h /r /y at 00:00 /every:M,T,W,Th,F,S,Su d:\批处理文件名

  2. k8s的容器编排

    1.K8S是如何对容器编排? 在K8S集群中,容器并非最小的单位,K8S集群中最小的调度单位是Pod,容器则被封装在Pod之中.由此可知,一个容器或多个容器可以同属于在一个Pod之中. 2.Pod是怎 ...

  3. MySQL服务器

    ---恢复内容开始--- mysql是基于C/S端的服务器软件 mysql服务端 -server端开启 -解析指令 -对文件夹.文件.数据的增删改查 mysql客户端 -连接S段 -发送指令(sql语 ...

  4. 什么是Log4j，Log4j详解！

    由于时间紧急,自己就不写了.一下转载链接: https://www.cnblogs.com/ITtangtang/p/3926665.html

  5. 没有向ZK写offset数据

    两天公司要学习kafka,结合之前的storm,做了一个简单的集成,之前也参考了网上的例子一些例子,发现或多或少都有一些问题.所以自己做了一个. 这个是网上其他人遇到的问题,给摘录一下,防止以后自己和 ...

  6. learning scala dependency injection

    println("Step 1: Create a trait which knows how to do create, read, update and delete operation ...

  7. 元素(element)创建

    一.元素创建的三种方式-------元素创建是为了提高用户的体验 1.第一种 document.write("标签代码及内容") <input type="butt ...

  8. [Luogu] 运输计划

    https://www.luogu.org/problemnew/show/2680 inline 神奇的东西 最好戒掉吧(read()除外) 这道题将求解性问题转化为判定性问题,当然就是二分答案了 ...

  9. 【説明する】hash

    首先对于判重,我们能想到的方法有什么呢? 1)bool数组 2)set(集) 数组与集合的优缺点: 1.因为集合是对数组做的封装,所以,数组永远比任何一个集合要快. 2.数组声明了它容纳的元素的类型, ...

  10. linux系列（十五）：tail命令

    1.命令格式: tail[必要参数][选择参数][文件] 2.命令功能: 用于显示指定文件末尾内容,不指定文件时,作为输入信息进行处理.常用查看日志文件. 3.命令参数: -f 循环读取 -q 不显示 ...