遮罩层div

oywl2008

浏览: 1051129 次
性别:
来自: 广州

最近访客更多访客>>

panghu

wangyy

qjl26

chyanog

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

Html & Javasctipt

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

分享到：

再谈iframe自适应高度 | 网页制作技巧所有浏览器(平台)效果一样

2012-02-23 11:52
浏览 940
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

遮罩层div

评论

发表评论

相关推荐

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

遮罩层div

评论

发表评论

相关推荐

ECMAScript 6 Babel

Javascript模块化编程（一）：模块的写法

CommonJS Modules/1.0 规范

测试框架 Mocha 实例教程

Node.js Tutorial for Beginners

The MVC and MVVM Patterns

10 Reasons Why You Should Use AngularJS

Angularjs JS Parse JSON

JavaScript == === 区别

angularjs

AngularJS 视频教程

Bootstrap Get Started 前台框架 可以适应多种平台

零基础学HTML 5实战开发(第一季)

show or hidden DIV

总结：JSP页面img图片缓存问题现象表述及问题解决

JS print

javascript create html table

jQuery Validation Plugin

For 语训中心

IE input file fakepath solution

最近访客更多访客>>

Bootstrap Get Started 前台框架可以适应多种平台