用jQuery实现页面遮罩d出框

概述页面遮罩d出框是最常见的一种情况，今天用jQuery实现页面遮罩d出框，主要用的技术有JQuery，css和html,html代码如下:&ltdiv id="main"&gt&lta href="javascript:showBg();"&gt点击这里查看效果&lt/a&gt &ltdiv id="fullbg"

页面遮罩d出框是最多见的1种情况，今天用jquery实现页面遮罩d出框，主要用的技术有Jquery，CSS和HTML,

 HTML代码以下:

<div ID="main"><a href="JavaScript:showBg();">点击这里查看效果</a> <div ID="fullbg"></div> <div ID="dialog"> <p class="close"><a href="#" onclick="closeBg();">关闭</a></p> <div>正在加载，请稍后....</div> </div> </div>

CSS代码以下：

body { Font-family:Arial,Helvetica,sans-serif; Font-size:12px; margin:0;}#main { height:1800px; padding-top:90px; text-align:center;}#fullbg { background-color:gray; left:0; opacity:0.5; position:absolute; top:0; z-index:3; filter:Alpha(opacity=50); -moz-opacity:0.5; -kHTML-opacity:0.5;}#dialog { background-color:#fff; border:5px solID rgba(0,0.4); height:400px; left:50%; margin:⑵00px 0 0 ⑵00px; padding:1px; position:fixed !important; /* 浮动对话框 */ position:absolute; top:50%; wIDth:400px; z-index:5; border-radius:5px; display:none;}#dialog p { margin:0 0 12px; height:24px; line-height:24px; background:#CCCCCC;}#dialog p.close { text-align:right; padding-right:10px;}#dialog p.close a { color:#fff; text-decoration:none;}jquery代码以下：

<script type="text/JavaScript"> //显示灰色 jquery 遮罩层 function showBg() { var bh = $("body").height(); var bw = $("body").wIDth(); $("#fullbg").CSS({ height:bh,wIDth:bw,display:"block" });www.2cto.com $("#dialog").show(); } //关闭灰色 jquery 遮罩 function closeBg() { $("#fullbg,#dialog").hIDe(); } </script>

大致预览情况：

在IE9中预览

 

在firefox中预览

 

在Chrome中预览

总结

以上是内存溢出为你收集整理的用jQuery实现页面遮罩d出框全部内容，希望文章能够帮你解决用jQuery实现页面遮罩d出框所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。