`
kaindy7633
  • 浏览: 78116 次
  • 性别: Icon_minigender_1
  • 来自: 绵阳
社区版块
存档分类
最新评论

【转】用jQuery制作全屏遮盖

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 >
分享到：
| windows下用Apache配置虚拟主机
评论
发表评论

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

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics