首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > Web前端 >

【转】用jQuery打造全屏遮盖

2012-11-23 
【转】用jQuery制作全屏遮盖代码如下:?html xmlnshttp://www.w3.org/1999/xhtmlheadmeta http-equiv

【转】用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>

热点排行