【转】用jQuery制作全屏遮盖
代码如下:
?
<
html
xmlns
=
"http://www.w3.org/1999/xhtml"
>
<
head
>
<
meta
http-equiv
=
"Content-Type"
content
=
"text/html; charset=UTF-8"
>
<
title
>爱斯诺(isnowe.com)-jquery全屏遮罩教程</
title
>
<
script
type
=
"text/javascript"
src
=
"http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"
></
script
>
<
style
type
=
"text/css"
>
#mask{width:100%;position:absolute;background:#000;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=90)";
filter:alpha(opacity=90);opacity: .9;z-index:99;left:0;top:0;display:none;
}
#detail—dialog{position:absolute;width:500px;height:300px;
background:#fff;left:30%;top:30%;z-index:999;display:none;
}
</
style
>
</
head
>
<
body
>
<
script
type
=
"text/javascript"
>
$(document).ready(function(){
????
var dialog_h = $(document).height();
????
$(".open").click(function(){
????????
$("#mask").attr("style","display:block;height:"+dialog_h+"px");
????????
$("#detail—dialog").attr("style","display:block;");
????
})
????
$(".close").click(function(){
????????
$("#mask").attr("style","display:none;");
????????
$("#detail—dialog").attr("style","display:none;");
????
})
})
</
script
>
<
a
href
=
"#"
class
=
"open"
>点这里打开弹出层</
a
>
<
div
id
=
"mask"
></
div
>
<
div
id
=
"detail—dialog"
>
?????
我是弹出层,<
a
href
=
"#"
class
=
"close"
>点这里关闭弹出层</
a
>
</
div
>
</
body
>
</
html
>