最精简,最强大的 jQuery 遮罩层效果。
1. 当浏览器改变大小时,遮罩层的大小会相应地改变。
2. 遮罩层上方的对话框可随 scroll 的改变而改变,即对话框居中显示。
HTML Code:
- <div id="main"> <a href="#" onclick="showBg();">点击这里看 jQuery 遮罩层效果.</a> </div>
- <!-- jQuery 遮罩层 -->
- <div id="fullbg"></div>
- <!-- end jQuery 遮罩层 -->
- <!-- 对话框 -->
- <div id="dialog">
- <p class="close"><a href="#" onclick="closeBg();">关闭</a></p>
- <p>正在加载,请稍后...</p>
- </div>
- <!-- jQuery 遮罩层上方的对话框 -->
CSS Code:
- <style type="text/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:0px;
- opacity:0.5;
- position:absolute;
- top:0px;
- z-index:3;
- filter:alpha(opacity=50); /* IE6 */
- -moz-opacity:0.5; /* Mozilla */
- -khtml-opacity:0.5; /* Safari */
- }
- #dialog {
- background-color:#FFF;
- border:1px solid #888;
- display:none;
- height:200px;
- left:50%;
- margin:-100px 0 0 -100px;
- padding:12px;
- position:fixed !important; /* 浮动对话框 */
- position:absolute;
- top:50%;
- width:200px;
- z-index:5;
- }
- #dialog p {
- margin:0 0 12px;
- }
- #dialog p.close {
- text-align:right;
- }
- </style>
jQuery Code:
- <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
- <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>
- <!--[if lte IE 6]>
- <script type="text/javascript">
- // 浮动对话框
- $(document).ready(function() {
- var domThis = $('#dialog')[0];
- var wh = $(window).height() / 2;
- $("body").css({
- "background-image": "url(about:blank)",
- "background-attachment": "fixed"
- });
- domThis.style.setExpression('top', 'eval((document.documentElement).scrollTop + ' + wh + ') + "px"');
- });
- </script>
- <![endif]-->
注意:请将遮罩层的 DIV 放置于 HTML 文档最后 </body> 标签之前,否则遮罩层将无法获取当前浏览器窗口的高度。
相关推荐
JQUERY遮罩效果实现网页JS遮罩层,使网站不用刷新操作
JQuery遮罩层登录界面源码 测试浏览器:IE8、FF3.6.8、Google Chrome (IE8中弹出登录层后会出现竖拉条,其他两种没有出现,那个竖拉条可以在JS中通过修改数值让其不出现,但是下面会出现白边) 点击登录显示登录...
busy-load是一款灵活的jquery loading遮罩层插件。它可以在加载的时候为容器添加一个遮罩层,并显示loading效果。loader可以是字体图标,图片,文字等,非常灵活方便。
在附件包中的示例中,主要给出了jQuery遮罩层登陆效果,另外它还可以展示隐藏的页面内容,整个插件大小只有780bytes,可灵活变化高度和宽度,没有用到任何图片,支持在一个页面中创建多个实例,非常适合于创建:登录...
jQuery遮罩层代码,点击链接弹出浮动层效果,实例中演示弹出了宽度为700PX/350PX/500PX的浮动窗口,有了实例,大家用起来就得心应手了,代码中的jQuery,引自google官方的托管库代码。
jQuery鼠标经过图片遮罩层效果基于jquery1.42.min.js制作,鼠标跟随效果。
一组非常好看的jQuery遮罩背景弹出层对话框插件,点击按钮弹出网页对话框代码,共有16种效果。
史上最精简,最强大的JS遮罩层效果,支持ie firefox jQuery遮罩层
利用Jquery几行代码就可以实现遮罩层的效果。
实现弹出登录遮罩层效果,除弹出的登录框外,不能进行操作(下载课直接使用)
基于jquery的BlockUI做的遮罩层
jQuery遮罩效果的弹出层对话框,本效果实现了4种弹出层效果:提示层、确认框提示层、alert提示层、删除商品提示层。当弹出层显示时,网页背景变暗,单击空白处可关闭弹出层。
jQuery遮罩层登录界面效果,AJAX登录验证,附源码下载。关于本例实现的过程和部分代码释义,请参照这篇教程:http://www.veryhuo.com/a/view/40203.html
jQuery鼠标经过图片遮罩层效果基于jquery1.42.min.js制作,鼠标跟随效果。
主要介绍了jQuery遮罩层效果,结合实例形式较为详细的分析了jQuery实现遮罩层的原理与相关技术细节,需要的朋友可以参考下
jQuery css3打开遮罩图片形状过渡动画效果
jQuery插件 实现图片文字遮罩效果 jQuery插件 实现图片文字遮罩效果 jQuery插件 实现图片文字遮罩效果
jQuery手机端遮罩动画效果弹出层
jquery浮动遮罩导航菜单鼠标悬停导航遮罩层下拉菜单效果代码 jquery浮动遮罩导航菜单鼠标悬停导航遮罩层下拉菜单效果代码 jquery浮动遮罩导航菜单鼠标悬停导航遮罩层下拉菜单效果代码