<!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>

JS+CSS简单实现DIV遮罩层显示隐藏的更多相关文章

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

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

  2. jQuery+CSS 简单代码实现遮罩层( 兼容主流浏览器 )

    /* ** jQuery版本:jQuery-1.8.3.min.js ** 浏览器:Chrome( v31.0.1650.63 m ),IE11,Firefox( v32.0.1 ),IETester ...

  3. jquery实现div遮罩层

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

  4. 简单的ajax遮罩层（加载进度圈）cvi_busy_lib.js

    cvi_busy_lib.js cvi_busy_lib.js 是一个基于ajax的遮罩js,遮罩区域为body区域.使用比较简单. 效果: 在下面的Js代码,标注为红色标记为需要设置的参数. 1.g ...

  5. js根据鼠标方向划入遮罩层

    js根据鼠标方向划入遮罩层: <!DOCTYPE html> <html lang="en"> <head> <meta charset= ...

  6. 简单实现div遮罩

    顾名思义,div遮罩就是将网页上的一部分用div遮盖起来,防止用户误点,因此div遮罩的一个用途就是将table设置为不可编辑. 作者通过查找资料,并进行简单的测试,最终完成了以下几段简单代码,来实现 ...

  7. div 遮罩层 弹窗

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

  8. js进阶 13-1 jquery动画中的显示隐藏函数有哪些

    js进阶 13-1 jquery动画中的显示隐藏函数有哪些 一.总结 一句话总结:show(),hide(),toggle(),这三个. 1.jquery动画中显示隐藏效果函数有哪些? show()h ...

  9. JS控制文本框中的密码显示/隐藏功能

    <html> <head> <title>[荐]JS控制文本框中的密码显示/隐藏功能_网页代码站(www.6a8a.com)</title> <s ...

随机推荐

  1. CoreJavaE10V1P3.10 第3章 Java的基本编程结构－3.10 数组（Arrays）

    数组是存储同一类型数据的数据结构 数组的声明与初始化 int[] a; int a[]; int[] a = new int[100]; int[] a = new int[100]; for (in ...

  2. 自定义Dialog，从下面弹出

    Window window= getWindow(); 只要 打开一个Activity 就有一个窗口存放这个Activity ,手机又很多个窗口,不只是一个窗口 import android.app. ...

  3. struts2.0中struts.xml配置文件详解

    先来展示一个配置文件 <!DOCTYPE struts PUBLIC "-//Apache Software Foundation//DTD Struts Configuration ...

  4. attr 和 prop 区别

    jquery 中 attr 和 prop 都表示 "属性",同样是属性为啥还要弄两个! attr 适用于自定义属性 如 定义一个懒加载用的src 栗子 <img class= ...

  5. noip 2016 提高组题解

    前几天写的那个纯属搞笑.(额,好吧,其实这个也不怎么正经) 就先说说day2吧: T1:这个东西应该叫做数论吧. 然而我一看到就照着样例在纸上推了大半天(然而还是没有看出来这东西是个杨辉三角) 然后就 ...

  6. Objective-C Runtime 运行时之六：拾遗(转载)

    前面几篇基本介绍了runtime中的大部分功能,包括对类与对象.成员变量与属性.方法与消息.分类与协议的处理.runtime大部分的功能都是围绕这几点来实现的. 本章的内容并不算重点,主要针对前文中对 ...

  7. tar命令结合find搜索将指定条件的文件进行打包压缩

    今天处理 /tmp 临时目录下 session 文件过多的问题,顺便找到了这个 tar 结合 find 打包压缩的方法,记录下来,很实用的哈! 搜索 /tmp 目录下 创建超过 24 分钟的文件 fi ...

  8. OpenGL编译问题随手记

    1.error C2381: "exit" : 重定义:__declspec(noreturn) 不同 编译OpenGL   Red   Book   的例子时出现错误, stdl ...

  9. 关于数据汇总方面返回Json数据的小小心得

    在一开始的开发中,计算好相关数据,然后通过 1.拼串 2.实例化Dictory对象再通过JavaScriptSerializer转换为json. 其中,2只适合于二维数据.1适合多维数据,但拼串比较费 ...

  10. 生成 Qt 文档

    个人总结    从命令行进入Qt安装目录     设置环境变量     set path=D:/mingw32/bin;D:/Qt/5.0.0/qtbase/bin;D:/icu/bin;D:/icu ...