遮罩层div
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> 
相关推荐
cbao 0喜欢 / 0评论 2019-12-29
浪味仙 0喜欢 / 0评论 2019-12-24
Hhjian 0喜欢 / 0评论 2014-05-31
人心 0喜欢 / 0评论 2012-02-05
zhanghao 0喜欢 / 0评论 2016-11-24
攻城师 0喜欢 / 0评论 2019-06-28
asdjkl 0喜欢 / 0评论 2017-05-18
csscode 0喜欢 / 0评论 2016-09-13
刁连通 0喜欢 / 0评论 2016-05-06
海欣海夜 0喜欢 / 0评论 2015-06-29
最近用phonegap在安卓手机中使用Html5+css3做页面，<a name="yes" data-role="button" style="display: block;font-size:16
ruanjianxiong 0喜欢 / 0评论 2014-08-17
83540198 0喜欢 / 0评论 2014-08-01
DevilPace 0喜欢 / 0评论 2014-05-31
Kindlecode 0喜欢 / 0评论 2012-10-27
83510998 0喜欢 / 0评论 2012-04-28
89203856 0喜欢 / 0评论 2012-04-17
83453065 0喜欢 / 0评论 2012-03-14
yyzhu 0喜欢 / 0评论 2011-09-27
ElementW 0喜欢 / 0评论 2011-09-06
scjcjlu 0喜欢 / 0评论 2011-07-26
debbykindom 0喜欢 / 0评论 2011-07-05
liusure0 0喜欢 / 0评论 2011-07-01
css教程 0喜欢 / 0评论 2011-06-30
海欣海夜 0喜欢 / 0评论 2011-05-20
icecoffeemzp 0喜欢 / 0评论 2011-03-09
LeoNature 0喜欢 / 0评论 2018-10-24
wjsgtxy 0喜欢 / 0评论 2017-04-27
私有云 0喜欢 / 0评论 2017-03-30
CoderEight 0喜欢 / 0评论 2017-03-15
csdnwpno 0喜欢 / 0评论 2017-09-19
lrlnh 0喜欢 / 0评论 2017-05-11
niehanmin 0喜欢 / 0评论 2016-02-02
葉無聞 0喜欢 / 0评论 2018-11-12
夜光寒 0喜欢 / 0评论 2019-04-29
yibawuqing 0喜欢 / 0评论 2016-12-29
86403563 0喜欢 / 0评论 2016-09-14
PHP淮北PHP00网 0喜欢 / 0评论 2016-09-13
zxcSabrina 0喜欢 / 0评论 2016-09-12
AnneZhao 0喜欢 / 0评论 2016-08-25
AB君 0喜欢 / 0评论 2016-08-06
81423067 0喜欢 / 0评论 2016-07-25
responsecool 0喜欢 / 0评论 2019-04-26
xxglh 0喜欢 / 0评论 2016-05-26
handsomezsc 0喜欢 / 0评论 2016-05-12
xpnew的技术blog 0喜欢 / 0评论 2016-01-26
websssssss 0喜欢 / 0评论 2019-04-24
舜岳 0喜欢 / 0评论 2019-04-24