<!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. open live writer下载安装

    以前记笔记都是用Evernote,啥都记在上面.除了学习工作的以外,还有各种账号密码啦(这个真心有必要,再也不用各种试了),妈妈要我帮她下载的广场舞名字啦,我双十一要剁手的东西啦等等.很好用的,推荐! ...

  2. 基于DDD的.NET项目搭建

    第一次写博客有点小激动,废话不多说先上图: 01_Client:存放UI相关的项目,比如ASP.NET MVC或者相关的Web Model及View Model项目. 02_Hosting:存放与Se ...

  3. picturefill + picture 标签 实现兼容性很棒的 响应式图片 自适应 屏幕大小

    polyfill 它是一个能够补齐浏览器兼容性问题的一个东西,使用到的<picture></picture>标签 ,并不是所有浏览器都支持,为了实现更好的兼容效果,这里就使用到 ...

  4. Hololens文件读写

    unity 内勾选 RemovableStorage 选项或 Package.appxmanifest 勾选 可移动存储 选项 uwp app IO操作用 StreamReader 会提示没有权限,如 ...

  5. 我理解的session和cookie

    tomcat管理session 理解tomcat是如何生成session的. 当用户请求到web资源有request.getSession()这段代码的时候,request首先会对请求的url判读是否 ...

  6. <hdu - 1600 - 1601> Leftmost Digit && Rightmost Digit 数学方法求取大位数单位数字

    1060 - Leftmost Digit 1601 - Rightmost Digit 1060题意很简单,求n的n次方的值的最高位数,我们首先设一个数为a,则可以建立一个等式为n^n = a * ...

  7. VM虚拟机的配置文件(.vmx)损坏修复

    来源://http://blog.csdn.net/houffee/article/details/18398603 VM虚拟机中使用.vmx文件保存虚拟机的所有软硬件配置,如果意外损坏的话将会出现不 ...

  8. css3-文字旋转

    <meta charset="utf-8"/><style> * {margin: 0; padding: 0;} ul { height: 80px; b ...

  9. 学习笔记_ADB常用指令

    ADB 查看连接到计算机的Android设备或模拟器 adb devices 说明: 正常显示状态应该是IP:Port State. State=device说明设备已经连接到计算机, State=o ...

  10. ElasticSearch(7)-排序

    引用自ElaticSearch权威指南 一.排序 相关性排序 默认情况下,结果集会按照相关性进行排序 -- 相关性越高,排名越靠前. 这一章我们会讲述相关性是什么以及它是如何计算的. 在此之前,我们先 ...