jQuery实现弹出带遮罩层的居中浮动窗口效果
本文实例讲述了jQuery实现弹出带遮罩层的居中浮动窗口效果。分享给大家供大家参考，具体如下：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>pop window</title>
<style>
*{
padding: 0;
margin: 0;
}
.hide{
display: none;
}
.popWindow{
width: 300px;
height: 300px;
background: #abcdef;
padding: 2px;
margin: 10px;
position: absolute;
left: 0;
top: 0;
z-index: 2;
}
.popWindow h3{
height: 30px;
line-height: 30px;
}
.popWindow h3 span{
float: right;
font-size: 14px;
font-weight: normal;
cursor: pointer;
}
.popWindow h3 span:hover{
color: #f00;
}
.popWindow .content{
height: 270px;
background: #fff;
}
.mask{
background: #000;
opacity: 0.4;
position: absolute;
left: 0;
top: 0;
z-index: 1;
}
</style>
</head>
<body style="width:2000px">
<a href="javascript:;" id="show">显示窗口</a>
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<div class="popWindow hide">
<h3>弹出窗口的标题<span>关闭</span></h3>
<div class="content">弹出窗口的内容</div>
</div>
<script src="jquery-1.7.2.min.js"></script>
<script>
$(function(){
var oBtn = $('#show');
var popWindow = $('.popWindow');
var oClose = $('.popWindow h3 span');
//浏览器可视区域的宽度
var browserWidth = $(window).width();
//浏览器可视区域的高度
var browserHeight = $(window).height();
//浏览器纵向滚动条距离上边界的值
var browserScrollTop = $(window).scrollTop();
//浏览器横向滚动条距离左边界的值
var browserScrollLeft = $(window).scrollLeft();
//弹出窗口的宽度
var popWindowWidth = popWindow.outerWidth(true);
//弹出窗口的高度
var popWindowHeight = popWindow.outerHeight(true);
//left的值＝浏览器可视区域的宽度／2－弹出窗口的宽度／2+浏览器横向滚动条距离左边界的值
var positionLeft = browserWidth/2 - popWindowWidth/2+browserScrollLeft;
//top的值＝浏览器可视区域的高度／2－弹出窗口的高度／2+浏览器纵向滚动条距离上边界的值
var positionTop = browserHeight/2 - popWindowHeight/2+browserScrollTop;
var oMask = '<div class="mask"></div>'
//遮照层的宽度
var maskWidth = $(document).width();
//遮照层的高度
var maskHeight = $(document).height();
oBtn.click(function(){
popWindow.show().animate({
'left':positionLeft+'px',
'top':positionTop+'px'
},500);
$('body').append(oMask);
$('.mask').width(maskWidth).height(maskHeight);
});
$(window).resize(function(){
if(popWindow.is(':visible')){
browserWidth = $(window).width();
browserHeight = $(window).height();
positionLeft = browserWidth/2 - popWindowWidth/2+browserScrollLeft;
positionTop = browserHeight/2 - popWindowHeight/2+browserScrollTop;
popWindow.animate({
'left':positionLeft+'px',
'top':positionTop+'px'
},500);
}
});
$(window).scroll(function(){
if(popWindow.is(':visible')){
browserScrollTop = $(window).scrollTop();
browserScrollLeft = $(window).scrollLeft();
positionLeft = browserWidth/2 - popWindowWidth/2+browserScrollLeft;
positionTop = browserHeight/2 - popWindowHeight/2+browserScrollTop;
popWindow.animate({
'left':positionLeft+'px',
'top':positionTop+'px'
},500).dequeue();
}
});
oClose.click(function(){
popWindow.hide();
$('.mask').remove();
});
});
</script>
</body>
</html>
运行效果图如下：
更多关于jQuery相关内容感兴趣的读者可查看本站专题：《jQuery扩展技巧总结》、《jQuery常用插件及用法总结》、《jQuery拖拽特效与技巧总结》、《jQuery表格(table)操作技巧汇总》、《jquery中Ajax用法总结》、《jQuery常见经典特效汇总》、《jQuery动画与特效用法总结》及《jquery选择器用法总结》
希望本文所述对大家jQuery程序设计有所帮助。
相关推荐
-
jQuery阻止移动端遮罩层后页面滚动
css代码: .ovfHiden{overflow: hidden;height: 100%;} jquery: $(".header_right").click(function(){ $('html,body').addClass('ovfHiden'); //使网页不可滚动 $(".searchbox").show(); }) $(".yg-close").click(function(){ $('html,body').removeCla
-
jQuery实现的页面遮罩层功能示例【测试可用】
本文实例讲述了jQuery实现的页面遮罩层功能.分享给大家供大家参考,具体如下: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"
-
Jquery实现遮罩层的方法
本文实例讲述了Jquery实现遮罩层的方法.分享给大家供大家参考.具体如下: 1.假设#main为页面body中的最外层Div标签 2.背景被遮罩后,显示的弹出窗(默认是不显示的,所包含的CSS这里就不贴了): <!-- Status Bar Start --> <div id="warning-dialog" class="status warning center-top no-display"> <p class="cl
-
jQuery操作dom实现弹出页面遮罩层(web端和移动端阻止遮罩层的滑动)
最近项目遇到了遮罩层的一些问题,总结一下: 弹出遮罩层 遮罩层弹出有非常多的方法,这里只写出本人用的代码,使用jq操作dom的方法进行实现的. <style>.box{position:absolute;width:100%;left:50%;height:auto;z-index:100;background-color:#f5f5f5;border:1px #ddd solid;padding:1px;}</style><div id="bg" v-c
-
jQuery+AJAX实现遮罩层登录验证界面（附源码）
JQuery遮罩层登录界面效果的实现,AJAX实现登录验证,文章尾有完整示例源码下载,欢迎大家学习研究. 操作系统:Windwos7 Ultimate 开发工具:Visual Studio 2010 数据库:Sql Server 2005 测试浏览器:IE8.FF3.6.8.Google Chrome (IE8中弹出登录层后会出现竖拉条,其他两种没有出现,那个竖拉条可以在JS中通过修改数值让其不出现,但是下面会出现白边,越来越觉得IE有点那个了......) 1.预览 1)登录前 2)点击登录显
-
jquery实现点击其他区域时隐藏下拉div和遮罩层的方法
本文实例讲述了jquery实现点击其他区域时隐藏下拉div和遮罩层的方法.分享给大家供大家参考,具体如下: 为了更好的用户体验,在做下拉获取其他有弹出层的时候,当展开下拉时,要做到点击其他区域也能自动隐藏收起下拉和遮罩层,这样的效果用一段js就可以了. 以下图为例的一个下拉菜单为参考: 效果实现源码: $(document).bind('click', function(e) { var e = e || window.event; //浏览器兼容性 var elem = e.target ||
-
轻量级网页遮罩层jQuery插件用法实例
本文实例讲述了轻量级网页遮罩层jQuery插件用法.分享给大家供大家参考.具体如下: 使用jQuery的好处是很多人为它写一些组件,而在项目所需用到功能也都可以找到一些组件去完成. 现在又这样一个需求当用户点击一个按钮后不允许用户进行任何的操作,取而代之的是弹出一个遮罩层显示一个loading提示框,效果如下. 其实这个需求很简单,但很多组件体积相对这个需求来说太大了,在网上瞎溜达了找到了一个还不错的组件,作者是上面也没有写.现在就来分析一下这个组件的源码和使用 /** * @部分参数说明 */
-
jQuery弹出遮罩层效果完整示例
本文实例讲述了jQuery弹出遮罩层效果.分享给大家供大家参考,具体如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head&
-
jquery弹出关闭遮罩层实例
复制代码 代码如下: <!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><title>jquery简便实现遮罩层
-
jQuery遮罩层实现方法实例详解(附遮罩层插件)
本文实例分析了jQuery遮罩层实现方法.分享给大家供大家参考,具体如下: 1 背景半透明遮罩层样式 需要一个黑色(当然也可以其他)背景,且须设置为绝对定位,以下是项目中用到的css样式: /* 半透明的遮罩层 */ #overlay { background: #000; filter: alpha(opacity=50); /* IE的透明度 */ opacity: 0.5; /* 透明度 */ display: none; position: absolute; top: 0px; lef
-
jQuery点击按钮弹出遮罩层且内容居中特效
本文为大家分享了jQuery点击按钮弹出遮罩层且内容居中的特效,下面来看最终实现的效果: 由于是测试的程序,所以我未加关闭的按钮. 一.主体程序 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>弹出居中遮罩</title> <meta name="viewport" content="width=devi
-
JQuery 遮罩层实现(mask)实现代码
其中有mask()和unmask()这两个方法,这两个方法在指定的元素上添加一个遮罩层和一个提示消息实现,增加客户体验.由于最近做项目的时候,发现有时为了使用这一两个方法需要引入一个比较"庞大"的Extjs进来,觉得有点不划算,于是自己用jquery实现了一个比较简单mask.unmask方法来实现该效果.大家知道jquery是一个优秀的javascript框架,不但体积小而且使用方便,我现在逐渐将系统中使用Extjs实现的代码或组建全部更换成Jquery来实现.好了不多说,上我的代码