peihong-ph
- 浏览: 21255 次
- 性别:
- 来自: 北京
-
最新评论
html代码:
<body topmargin="0">
<div class="main">
网页主体内容，包含网页其他栏目
</div>
<!--蒙板-->
<div class="mask"></div>
<div class="opendiv" >
最上层DIV覆盖下面的全部DIV
</div>
</body>
css代码：
.main { width:960px; height:800px; background-color:#FF9966; margin:0px auto;}
.mask{ z-index:900; position:fixed!important; position:absolute; left:0px; top:0px; width:100%; height:100%; background:#000; filter: alpha(opacity=45); opacity: 0.45; -moz-opacity: 0.45; -khtml-opacity: 0.45; }
.opendiv{z-index:920;position:absolute;left:50%; top:50%; margin-left:-175px; margin-top:-125px; width:334px; height:180px; background-color: #6699FF; text-align:center; padding-top:20px;}
注：position:fixed!important;这个地方很重要
<body topmargin="0">
<div class="main">
网页主体内容，包含网页其他栏目
</div>
<!--蒙板-->
<div class="mask"></div>
<div class="opendiv" >
最上层DIV覆盖下面的全部DIV
</div>
</body>
css代码：
.main { width:960px; height:800px; background-color:#FF9966; margin:0px auto;}
.mask{ z-index:900; position:fixed!important; position:absolute; left:0px; top:0px; width:100%; height:100%; background:#000; filter: alpha(opacity=45); opacity: 0.45; -moz-opacity: 0.45; -khtml-opacity: 0.45; }
.opendiv{z-index:920;position:absolute;left:50%; top:50%; margin-left:-175px; margin-top:-125px; width:334px; height:180px; background-color: #6699FF; text-align:center; padding-top:20px;}
注：position:fixed!important;这个地方很重要
分享到：
发表评论
-
spring注解+restlet
2014-08-26 13:32 606spring注解精解： http://www.douban.c ... -
Spring使用程序方式读取properties文件
2014-07-03 10:37 488Spring使用程序方式读取properties文件 在sp ... -
用javascript取当前系统时间(年、月、日等全)
2013-07-25 14:56 527var myDate = new Date(); myDate ... -
sql--查询数据库的连接数
2013-06-07 14:04 552Oracle: select * from v$sessio ... -
jQuery中设置form表单中action值的方法
2013-04-28 18:16 1084html代码： <form id="myFo ... -
java filter
2013-04-24 23:17 831一、使浏览器不缓存页面的过滤器 Java代码 impo ... -
sql count
2013-04-23 14:33 669连接该服务器的个数： SELECT count(*) FRO ... -
关闭打开页js（兼容浏览器）
2013-04-22 13:17 810<script> function closeSe ... -
sql-修改表
2013-04-11 10:19 646如需在表中添加列，请使用下列语法: ALTER TABLE t ... -
wget 爬虫
2012-11-13 13:34 1416wget 使用指南 wget是一个从网络上自动下载文件的自由工 ... -
Struts2的整理
2012-11-13 13:31 8211、任何表现层框架都是用来帮我们实现MVC model1(js ... -
dwr的使用
2012-11-11 12:38 744Dwr使用说明 1. 将dwr的ja ... -
Ajax的使用
2012-11-11 12:37 663ajax的使用步骤： 1.需要通过JavaScript创建XM ... -
JAVA数据库连接池
2012-11-09 00:02 693JAVA数据库连接池 基 ... -
事务传播特性和事务隔离级别
2012-11-08 23:48 562事务传播特性了解事务 ... -
ibatis
2012-11-08 23:45 713ibatis: ibatis中dao中的方法在使用sqlMap ... -
懒加载
2012-11-07 19:03 595get和load默认的时候都是立即检索，只有设置lazyloa ... -
HQL语句
2012-11-07 19:01 5791.实体查询 String hql = &qu ... -
类的加载和反射
2012-11-07 18:57 6381. 类的加载、连接和初始 a) 类的加载 i. 当程序主动使 ... -
部分重要SQL语句
2012-11-06 20:13 690TO_CHAR(date, 'fmt') 用于将 ...
相关推荐
jquery的遮盖层代码，简单易用，方便使用，哈哈 规范化
JS+CSS遮盖层，完全支持ie等主流浏览器，并解决在ie6下无法遮盖窗口级控件问题。
javascript写的页面遮盖层,可根据具体情况自己设定或改写，能够根据不同的情况集体设定。
非常好用的jquery弹出框，也可做弹出层，遮盖层
javascript实现遮盖层效果 点击登陆后弹出小登陆窗口 原页面可见但是不能操作！
NULL 博文链接：https://youzhibing.iteye.com/blog/2128287
NULL 博文链接：https://tangdonnaui.iteye.com/blog/548289
点击用户登陆弹出对话框并遮罩背景 拖动滚动条两个层位置变化(如果不使用该段代码，当用户拖动滚动条遮罩层不能覆盖整个页面，对话框层也不能位于页面中间)
身份证格式验证，js遮盖层显示和隐藏
Bootstrap实现遮罩层 参考文档： http://blog.csdn.net/u014175572/article/details/51800168 Bootstrap实现遮罩层 参考文档： http://blog.csdn.net/u014175572/article/details/51800168 Bootstrap实现遮罩层 ...
JavaScript经典案例，实用素材。。。。。。。。。。。。。
iframe弹出框遮罩父类页面，进去之后直接打开demo里面的layout.html 页面看效果，然后查看代码；才方法不需要将子类的js 及弹出框的代码写在父类里面，依旧是写在子类页面里面
利用div+css制作弹出层并遮罩层，主用用了两个div，一个div用于弹出框，另一个则遮罩整个页面
基于vue开发的popup 的mixins 用于管理弹出框的遮盖层
网页<Object>标签遮盖DIV标签解决方法，IE11亲测可用。
用于页面加载的前置前面，防止页面还没加载完就被用户点击，或者给用户体验增强。
bootstrap 前端 div方式 实现遮罩效果 数据加载过程中禁止用户操作
根据element+vue 自定义dialog+drawer组件 弹窗+抽屉 无覆盖 + 可拖拽
通过对画笔的设置，获取灰色遮盖，不用美工的图片也可以达到半透明遮盖的效果，节省了资源。
图片遮盖涂抹.rar