jQuery+css+html实现页面遮罩弹出框
更新时间：2013年03月21日 15:52:09 作者：
面遮罩弹出框已经不是一个陌生的话题了，实现的方法大同小异多种多样，今天用jQuery实现页面遮罩弹出框，主要用的技术有JQuery，css和html,感兴趣的朋友可以参考下哈
页面遮罩弹出框是最常见的一种情况，今天用jQuery实现页面遮罩弹出框，主要用的技术有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,0, 0.4);
height:400px;
left:50%;
margin:-200px 0 0 -200px;
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"
});
$("#dialog").show();
}
//关闭灰色 jQuery 遮罩
function closeBg() {
$("#fullbg,#dialog").hide();
}
</script>
大致预览情况：
在ie9中预览
在firefox中预览
在chrome中预览
相关文章
详解jquery validate实现表单验证 （正则表达式）
本篇文章主要介绍了jquery validate实现表单验证 （正则表达式），用户填写表单时，可以快速地对用户填写的数据进行验证，并做出反馈。有兴趣的可以了解一下。2017-01-01
jQuery 使用手册，大家可以耐心的看完，就基本上入门了。2009-09-09
本文对jQuery的Cookie插件的使用方法和具体实例进行系统介绍,有需要的朋友可以看下2016-11-11
jQuery实现方法的链式操作是非常容易的。这里给出正确的使用方法2014-01-01
jQuery ajax仿Google自动提示SearchSuggess功能示例
这篇文章主要介绍了jQuery ajax仿Google自动提示SearchSuggess功能,结合实例形式较为详细的分析了jQuery结合ajax与.net后台调用sql数据库实现搜索自动提示相关操作技巧,需要的朋友可以参考下2019-03-03
jQuery 选择表格(table)里的行和列及改变简单样式
本文只是介绍如何用jQuery语句对表格中行和列进行选择以及一些简单样式改变，希望它可以对jQuery表格处理的深层学习提供一些帮助2012-12-12
这篇文章主要介绍了jQuery插件Validate实现自定义表单验证，自定义一个验证方法，感兴趣的小伙伴们可以参考一下2016-01-01
下面小编就为大家带来一篇jquery层级选择器(匹配父元素下的子元素实现代码)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-09-09
这篇文章主要介绍了解决jquery版本冲突的有效方法,对于web设计的兼容性调试很有借鉴价值,需要的朋友可以参考下2014-09-09
jquery.combobox中文api和例子，修复了上面的小bug
关于jquery.combobox，这个jquery的插件从官网上直接下载下来使用还有bug，以下是我对其api做的简单翻译，而且修复了上面的bug。2011-03-03
最新评论