<!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>
分享到:
相关推荐
DiV层移动实例(纯JS仿赛我的个人小窝)
JS+DIV以层代替弹出窗口的例子,弹出DIV层窗口 JS+DIV以层代替弹出窗口的例子,弹出DIV层窗口 JS+DIV以层代替弹出窗口的例子,弹出DIV层窗口 JS+DIV以层代替弹出窗口的例子,弹出DIV层窗口 JS+DIV以层代替弹出窗口的例子...
JAVASCRIPT弹出DIV层窗口实例
div遮蒙锁定效果大全 包括各种遮蒙效果 及其实例
选中复选框(可移动、可调整大小)后,打开的DIV具有移动/调整大小的功能(此时移动/调整大小快捷键可使用); 反之,不可移动/调整大小(此时移动/调整大小快捷键无效) 单选框默认居中打开选中,无论有无保存DIV位置和...
div css实例div css实例div css实例
Div拖动/调整大小实例 教你迅速的掌握如何写js 可以用鼠标控制div大小和位置 Div拖动/调整大小实例 教你迅速的掌握如何写js 可以用鼠标控制div大小和位置
24个DIV+CSS 超级经典实例 源代码 几乎包含了DIV+CSS技术的所有知识点
经典网站Div+CSS布局实例,流行布局代码赏析,绝对对你有提高,活学活用,没有验证浏览器的兼容性,如有不兼容的可自行修改下即可
DIV+CSS布局实例 浅谈网页制作中table与div方法布局网页框架的利和弊.pdf - 下载...
Div模态对话框,全屏遮挡,对话框里的图片居中定位,支持IE,Firefox,傲游,360安全浏览器
div+css布局实例,单行单列,单行双列,单行单列等等
利用div+css制作弹出层并遮罩层,主用用了两个div,一个div用于弹出框,另一个则遮罩整个页面
div+css 切图实例div+css 切图实例div+css 切图实例div+css 切图实例div+css 切图实例div+css 切图实例div+css 切图实例div+css 切图实例
div+css 网站实例 教程 css布局
CSS DIV CSS+DIV布局实例 精通CSS+DIV布局
DIV遮罩层 遮罩所有工作区域 简单的方法
最新版十天学会div+css(实例源代码及psd源文件)
div+css切图实例3 div+css切图实例3 div+css切图实例3 div+css切图实例3 div+css切图实例3 div+css切图实例3
CSS+DIV 20个经典实例(上)CSS+DIV 20个经典实例(上)CSS+DIV 20个经典实例(上)CSS+DIV 20个经典实例(上)CSS+DIV 20个经典实例(上)CSS+DIV 20个经典实例(上)CSS+DIV 20个经典实例(上)