当前位置: 代码迷 >> Web前端 >> 【转】用jQuery打造全屏遮盖
  详细解决方案

【转】用jQuery打造全屏遮盖

热度:410   发布时间:2012-11-23 00:03:43.0
【转】用jQuery制作全屏遮盖

代码如下:

?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3c.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
< 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 >
  相关解决方案