安科网

遮罩层div

AnyBisks

AnyBisks

2012-02-23

关注 关注 
<html>
<head>
<script src="http://common.cnblogs.com/script/jquery.js" type="text/javascript"></script>
<script type="text/javascript">
        function ShowDialog() {
            $('#divGray').css('height', $(document).height());
            $('#divGray').show();
            
            $('#divEdit').css('top', $(document).scrollTop() + 80);
            $('#divEdit').css('left', ($(document).width() - 500) / 2);
            $('#divEdit').show();

            $('#divShadow').css('top', $('#divEdit').offset().top + 5);
            $('#divShadow').css('left', $('#divEdit').offset().left + 5);
            $('#divShadow').css('width', $('#divEdit').width());
            $('#divShadow').css('height', $('#divEdit').height());
            $('#divShadow').show();
        }
        
        function CancelDialog() {
            $('#divGray').hide();
            $('#divEdit').hide();
            $('#divEdit input:text').val('');
            $('#divShadow').hide();
        }
</script>
<style type="text/css">
#divEdit {
    position: absolute;
    z-index: 10003;
    width: 480px;
    border-top: #709cd2 1px solid;
    border-left: #709cd2 1px solid;
    border-right: #709cd2 1px solid;
    border-bottom: #709cd2 1px solid;
    display: none;
}
#divGray {
    position: absolute;
    z-index: 10001;
    left: 0px;    
    top: 0px;
    width: 100%;
    background-color: #EEEFFF;
    opacity: 0.6;                /* Firefox, Safari(WebKit), Opera)
    filter: "alpha(opacity=60)"; /* IE 8 */
    filter: alpha(opacity=60);   /* IE 4-7 */
    display: none;
}
#divShadow {
    position: absolute;
    z-index: 10002;
    background: #000EEE;
    opacity: 0.1;                /* Firefox, Safari(WebKit), Opera)
    filter: "alpha(opacity=10)"; /* IE 8 */
    filter: alpha(opacity=10);   /* IE 4-7 */
    display: none;
}
</style>
</head>
<body>
<input  type="button" style="height: 30px; width: 100px;" onClick="ShowDialog()" value="cover" />
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<input type="button" value="test" />

<div id="divEdit">
        abcd
        <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
        <input type="button" value="cancel" onClick="CancelDialog()"/>
</div>
<div id="divGray"></div><div id="divShadow"></div>
</body>
</html>

It is ok Html code.

<html>
<head>
<script src="http://common.cnblogs.com/script/jquery.js" type="text/javascript"></script>
<script type="text/javascript">
        function ShowDialog() {
            $('#divGray').css('height', $(document).height());
            $('#divGray').show();
            
            $('#divEdit').css('top', $(document).scrollTop() + 200);
            $('#divEdit').css('left', ($(document).width() - 500) / 2);
            $('#divEdit').show();

            $('#divShadow').css('top', $('#divEdit').offset().top + 5);
            $('#divShadow').css('left', $('#divEdit').offset().left + 5);
            $('#divShadow').css('width', $('#divEdit').width());
            $('#divShadow').css('height', $('#divEdit').height());
            $('#divShadow').show();
        }
        
        function CancelDialog() {
            $('#divGray').hide();
            $('#divEdit').hide();
            $('#divEdit input:text').val('');
            $('#divShadow').hide();
        }
</script>
<style type="text/css">
#divEdit {
    position: absolute;
    z-index: 10003;
    width: 480px;
 
    
    background-color: #FFFFF;
    background: #FFFFF;
    display: none;
}
#divGray {
    position: absolute;
    z-index: 10001;
    left: 0px;    
    top: 0px;
    width: 100%;
    background-color: #000000;
    opacity: 0;                /* Firefox, Safari(WebKit), Opera)
    filter: "alpha(opacity=40)"; /* IE 8 */
    filter: alpha(opacity=40);   /* IE 4-7 */
    display: none;
}
#divShadow {
    position: absolute;
    z-index: 10002;
    background: #FFFFFF;

    display: none;
}
</style>
</head>
<body>
<input  type="button" style="height: 30px; width: 100px;" onClick="ShowDialog()" value="cover" />
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<input type="button" value="test" />

<div id="divEdit">
        abcd
        <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
        <input type="button" value="cancel" onClick="CancelDialog()"/>
</div>
<div id="divGray"></div><div id="divShadow"></div>
</body>
</html>

遮罩层 div css

AnyBisks

AnyBisks

0 关注 0 粉丝 0 动态

关注 关注

相关推荐

点击微信防封短链接强制使用浏览器打开页面的遮罩层最新实现方案！

相信在微信中做推广的朋友一定都遇到这种情况的、当你需要在微信中推广的时候会发现，自己的网页被微信屏蔽了，还有就是说APP的下载链接在微信中点击是无法下载的。必须要手动点击，右上角的三个点，然后选择在浏览器中打开，才可以顺利完成！虽然说这个对于我们比较了解微

cbao 2019-12-29

微信中域名被封-页面添加遮罩层提示用户使用浏览器打开（或下载APP）

微信营销是网络经济时代企业或个人营销模式的一种。是伴随着微信的火热而兴起的一种网络营销方式。但是也正因为如此，微信官方的屏蔽封杀域名的规范的也越来越严格。商家与微信之间进行着微信防封防屏蔽和封杀较量，可以说微信在广告拦截，封杀方面几乎是苛刻的。任何有广告嫌

浪味仙 2019-12-24

Jquery学习之路(三) 实现弹出层插件

弹出层的应用还是比较多的，登陆，一些同页面的操作，别人的总归是别人的，自己的才是自己的，所以一直以来想写个弹出层插件。不多废话，直接开始吧！要弹出层，先要用一个遮罩层挡在下面的页面，此遮罩层是全屏的，页面滚动也要有，所以设置position: fixed;

Hhjian 2014-05-31

一个轻量级的网页遮罩层jQuery插件

使用jQuery的好处是很多人为它写一些组件，而在项目所需用到功能也都可以找到一些组件去完成。现在又这样一个需求当用户点击一个按钮后不允许用户进行任何的操作，取而代之的是弹出一个遮罩层显示一个loading提示框，效果如下。其实这个需求很简单，但很多组件体

人心 2012-02-05

纯CSS3写的10个不同的酷炫图片遮罩层效果

<p>在项目中我们会经常用到Session和Cookie，比如用户登录验证、记录用户浏览历史，存储购物车数据，限制用户会话有效时间等。<p>今天分享一个CSS3+jQuery制作一个可伸缩功能的搜索框。

zhanghao 2016-11-24

HTML5中dialog元素尝鲜

对话框是web项目中用于用户交互的重要部分，我们最常见的就是js中 alert()，confirm()，但是这个对话框的不美观，也不能自定义样式，所以在开发的过程中，一般根据自己自己的需求造轮子或者使用第三方的。开发中的对话框形式就是位置和大小随机组合的一

攻城师 2019-06-28

Jquery中BlockUI的详解

BlockUI插件需要那个jQuery版本的支持？BlockUI兼容jQuery v1.2.3以上的版本。BlockUI插件的V2版本有那些变化？解除锁定的时候，用于提示信息的元素不会从DOM中移除默认的遮罩层为黑色可用的选项设置进行了统一和清理设置插件选

asdjkl 2017-05-18

jQuery 遮罩层

<button onClick="showOverlay();" style=" width:100px; height:60px; margin:40px auto 40px auto; display:block;&

csscode 2016-09-13

Jquery点击弹出遮罩层

<input id="Button1" type="button" value="点击弹出层" onclick="ShowDiv" />

刁连通 2016-05-06

转载：JQuery弹出层，点击按钮后弹出遮罩层，有关闭按钮

<meta content="网页特效,特效代码,jQuery,css特效,Js代码,广告幻灯,图片切换" name="keywords" />. <meta content="jQuer

海欣海夜 2015-06-29

手机端 弹出遮罩层 并且不可滑动

最近用phonegap在安卓手机中使用Html5+css3做页面，<a name="yes" data-role="button" style="display: block;font-size:16

ruanjianxiong 2014-08-17

Jquery实现遮罩层，就是弹出DIV周围都灰色不能操作

定义一个div，设置宽高跟原网页一样，通过z-index浮在原网页上面，看上去是遮罩层的效果。弹出框的z-index比div的加1.#BgDiv{background-color:#e3e3e3; position:absolute; z-index:99

83540198 2014-08-01

Jquery学习之路(三) 实现弹出层插件

弹出层的应用还是比较多的，登陆，一些同页面的操作，别人的总归是别人的，自己的才是自己的，所以一直以来想写个弹出层插件。不多废话，直接开始吧！要弹出层，先要用一个遮罩层挡在下面的页面，此遮罩层是全屏的，页面滚动也要有，所以设置position: fixed;

DevilPace 2014-05-31

jQuery实现带遮罩层的消息框滑入滑出效果

}可见，重要的就是z-index:101，用来确保它在遮罩层之上，和CSS遮罩层那篇文章中提到的一样。关闭标签及其他元素的样式在这里就不一一介绍了，大家可以直接在Demo中查看到，你可以使用火狐的Firebug或Google浏览器中的开发者工具进行样式的在

Kindlecode 2012-10-27

简单jquery遮罩层

width: 100%;height: 100%;background: #333;position: absolute;top: 0;left: 0;filter: alpha(opacity=60);-moz-opacity: 0.6;opacity:

83510998 2012-04-28

使用jquery的blockui插件显示弹出层

在做网站的开发过程中，可能需要使用弹出层，使用jquery的blockui插件可以很轻松的实现这个效果。blockui可以在你发送ajax请求的时候，显示一个遮罩层禁止用户对页面进行操作并显示提示信息；或者用来显示一个登陆窗口，也可用来显示图片等。bloc

89203856 2012-04-17

Jquery easyui界面单击过快js错误之临时解决方案

在使用jquery easyui的做系统应用的时候，如果界面单击操作过快的话，总会出现js错误。原因应该是ajax请求未完成，相关操作未执行，多次单击使得界面上有很多的组件初始化未完成就结束了操作。<div id="overlay"

83453065 2012-03-14

遮罩层解决jQuery UI Dialog 内嵌iFrame拖曳缓慢问题

不知道大家使用jQuery UI Dialog 内嵌iFrame页面时候遇到拖曳延迟等问题没有，或者是对mousedown，mouseup事件触发不敏感。特别在同时弹出多个dialog非常明显。很明显问题症结所在就是iframe，所以对症下药就是要把ifr

yyzhu 2011-09-27

ExtJs源码分析与学习—遮罩层

该类用于在加载数据时为元素做出类似于遮罩的效果。如果配置了Ext.data.Store，则可将效果与Ext.data.Store的加载达到同步，并且mask本身也会被缓存起来从而可以为其他加载复用。对于所有的元素，这个遮罩类会替换元素本身的Updater加

ElementW 2011-09-06

JQuery遮罩层

<!padding : 0px ;margin : 0px ;background : #555 ;position : absolute ;Mask.load() ;}) ;var jq = _render() ;unload(jq) ;}) ;}

scjcjlu 2011-07-26
AnyBisks

AnyBisks

W3CSchool教程
HTML 教程
CSS 教程
Bootstrap 教程
Javascript 教程
jQuery 教程
后端教程
C 教程
Java 教程
PHP 教程
Python 教程
Go 教程
移动开发
Android 教程
Swift 教程
Kotlin 教程
jQuery Mobile 教程
ionic 教程
关于我们
新闻动态
联系方式
招聘英才
安科实验室
帮助与反馈

安科网(Ancii)，中国第一极客网

Copyright © 2013 - 2019 Ancii.com

京ICP备18063983号 京公网安备11010802014868号