jquery实现居中弹出层代码


Posted in Javascript onAugust 25, 2010
/* 
弹出窗口定位到浏览器中间 
1. show(options{ 
height:高度 
width:宽度 
speed:渐显时间 默认0 
container:包含的html内容的jquery对象 
model:是否是模态窗口,默认true,模态对话框就是在弹层下面在覆盖遮罩层,参考上篇文章Overlay实现 
}) 
2. close(speed:淡出时间 默认0) 
*/ 
Q.Panel = function() { 
var self = this; 
self._resetPosition = function() { 
self._container.css("top", self._getTop()); 
self._container.css("left", self._getLeft()); 
}; 
self._getTop = function() { 
return Q.bom.scrollY() + (Q.bom.windowHeight() - self._options.height) / 2; 
}; 
self._getLeft = function() { 
return (Q.dom.pageWidth() - self._options.width) / 2; 
}; 
self.show = function(options) { 
self._options = $.extend({ 
width: 350, 
height: 200, 
opacity: 0.5, 
model: true, 
speed: 0 
}, options || {}); 
self._container = self._options.container; 
var css = { 
'width': self._options.width, 
'height': self._options.height, 
'z-index': Q.Overlay.zindex, 
'position': 'absolute', 
'left': self._getLeft(), 
'top': self._getTop(), 
'display': 'none' 
}; 
self._container.css(css); 
if (self._options.model) { 
self._overlay = new Q.Overlay(self._options.opacity); 
self._overlay.show(); 
} 
$(window).scroll(self._resetPosition); 
$(window).resize(self._resetPosition); 
$(document.body).append(self._container); 
self._container.fadeIn(self._options.speed); 
Q.Overlay.zindex++; //没弹出一次就递增,防止多个弹层重叠 
}; 
self.close = function(speed) { 
$(window).unbind('resize', self._resetPosition); 
$(window).unbind('scroll', self._resetPosition); 
self._container.fadeOut(speed || 0, function() { 
self._container.remove(); 
if (self._options.model) { 
self._overlay.close(); 
} 
}); 
}; 
};

这里居中是通过js控制的,下面是几个用这个剧中Panel实现的通用对话框
/*弹出自定义隐藏框 
<div id="league" style="display:none"> 
<button class="close" >close</button> 
</div> 
Q.showPanel("league", function(panel, container) { 
container.find(".close").click(function() { 
panel.close(); 
} 
); 
*/ 
Q.showPanel = function(containerId, registerEventCallback) { 
var container = $("#" + containerId); 
var height = container.height(); 
var width = container.width(); 
container = container.clone(true); 
var options = { height: height, width: width, container: container }; 
var panel = new Q.Panel(); 
registerEventCallback(panel, container); 
panel.show(options); 
}; 
/*弹出窗口,从url加载窗体html片段*/ 
Q.openWindow = function(url, data, registerEventCallback) { 
$.get(url, data, function(html) { 
var panelDiv = $(html); 
panelDiv.hide(); 
$(document.body).append(panelDiv); 
var options = { height: panelDiv.height(), width: panelDiv.width(), container: panelDiv }; 
var panel = new Q.Panel(); 
registerEventCallback(panel, panelDiv); 
panel.show(options); 
}); 
} 
/*提示框,3秒后自动淡出*/ 
Q.tips = function(msg) { 
var html = '<div class="gu_layer w330">' + 
'<div class="gu_layer_main">' + 
'<h2><img class="icon_layer_corner" alt="" src="http://res.fetionpic.com/img/blank/spacer.gif">提示</h2>' + 
'<p class="gu_layer_txt">' + msg + '</p>' + 
'<div class="gu_layer_btn"></div>' + 
'</div></div>' 
var container = $(html); 
container.hide(); 
$(document.body).append(container); 
var panel = new Q.Panel(); 
panel.show({ container: container, height: container.height(), width: container.width() ,speed:500}); 
setTimeout(function() { panel.close(500); }, 3000); 
}; 
/*提示框*/ 
Q.alert = function(msg) { 
var html = '<div class="gu_layer w330">' + 
'<div class="gu_layer_main">' + 
'<h2><img class="icon_layer_corner" alt="" src="http://res.fetionpic.com/img/blank/spacer.gif"><a class="btn_tit_close" href="">关闭</a>提示</h2>' + 
'<p class="gu_layer_txt">' + msg + '</p>' + 
'<div class="gu_layer_btn"><a class="btn_org" href="">确 定</a></div>' + 
'</div></div>' 
var container = $(html); 
container.hide(); 
$(document.body).append(container); 
var panel = new Q.Panel(); 
container.find(".btn_tit_close").click(function() { 
panel.close(); 
return false; 
}); 
container.find(".btn_org").click(function() { 
panel.close(); 
return false; 
}); 
panel.show({ container: container, height: container.height(), width: container.width() }); 
}; 
/*确认框 cancel回调为可选*/ 
Q.confirm = function(title, msg, yes, cancel) { 
var html = '<div class="gu_layer w330">' + 
'<div class="gu_layer_main">' + 
'<h2><img class="icon_layer_corner" alt="" src="http://res.fetionpic.com/img/blank/spacer.gif"><a class="btn_tit_close" href="">关闭</a>' + title + '</h2>' + 
'<p class="gu_layer_txt">' + msg + '</p>' + 
'<div class="gu_layer_btn"><a class="btn_org" href="">确 定</a><a class="btn_gray" href="">取 消</a></div>' + 
'</div></div>' 
var container = $(html); 
container.hide(); 
$(document.body).append(container); 
var panel = new Q.Panel(); 
container.find(".btn_tit_close").click(function() { 
panel.close(); 
return false; 
}); 
container.find(".btn_gray").click(function() { 
if (cancel) 
cancel(); 
panel.close(); 
return false; 
}); 
container.find(".btn_org").click(function() { 
if (yes) 
yes(); 
panel.close(); 
return false; 
}); 
panel.show({ container: container, height: container.height(), width: container.width() }); 
};
Javascript 相关文章推荐
Jquery中国地图热点效果-鼠标经过弹出提示层信息的简单实例
Feb 12 Javascript
js实现按一下删除键删除整个单词附demo
Sep 05 Javascript
HTML+CSS+JS实现完美兼容各大浏览器的TABLE固定列
Apr 26 Javascript
JavaScript中Number.MAX_VALUE属性的使用方法
Jun 04 Javascript
Jquery检验手机号是否符合规则并根据手机号检测结果将提交按钮设为不同状态
Nov 26 Javascript
浅谈js中子页面父页面方法 变量相互调用
Aug 04 Javascript
jquery把int类型转换成字符串类型的方法
Oct 07 Javascript
深入理解Vue Computed计算属性原理
May 29 Javascript
js自定义input文件上传样式
Oct 26 Javascript
微信小程序 slot踩坑的解决
Apr 01 Javascript
小程序getLocation需要在app.json中声明permission字段
Apr 04 Javascript
浅析Vue下的components模板使用及应用
Nov 27 Javascript
jquery下实现overlay遮罩层代码
Aug 25 #Javascript
在网页中使用document.write时遭遇的奇怪问题
Aug 24 #Javascript
javascript下string.format函数补充
Aug 24 #Javascript
javascript下利用arguments实现string.format函数
Aug 24 #Javascript
基于jQuery的淡入淡出可自动切换的幻灯插件
Aug 24 #Javascript
js null,undefined,字符串小结
Aug 21 #Javascript
javascript中的float运算精度实例分析
Aug 21 #Javascript
You might like
thinkphp3.0 模板中函数的使用
2012/11/13 PHP
PHP5函数小全(分享)
2013/06/06 PHP
再谈querySelector和querySelectorAll的区别与联系
2012/04/20 Javascript
文字不间断滚动(上下左右)实例代码
2013/04/21 Javascript
jquery mobile动态添加元素之后不能正确渲染解决方法说明
2014/03/05 Javascript
JS遍历Json字符串中键值对先转成JSON对象再遍历
2014/08/15 Javascript
javascript实现英文首字母大写
2015/04/23 Javascript
Javascript缓存API
2016/06/14 Javascript
学习Javascript闭包(Closure)知识
2016/08/07 Javascript
JavaScript 实现的checkbox经典实例分享
2016/10/16 Javascript
正则表达式替换html元素属性的方法
2016/11/26 Javascript
微信小程序-拍照或选择图片并上传文件
2017/01/06 Javascript
js实现带缓动动画的导航栏效果
2017/01/16 Javascript
JS原型继承四步曲及原型继承图一览
2017/11/28 Javascript
开发Vue树形组件的示例代码
2017/12/21 Javascript
使用Angular-CLI构建NPM包的方法
2018/09/07 Javascript
vue自定义键盘信息、监听数据变化的方法示例【基于vm.$watch】
2019/03/16 Javascript
微信公众平台获取access_token的方法步骤
2019/03/29 Javascript
React 实现车牌键盘的示例代码
2019/12/20 Javascript
浅谈python字典多键值及重复键值的使用
2016/11/04 Python
Python内置函数 next的具体使用方法
2017/11/24 Python
使用python实现mqtt的发布和订阅
2019/05/05 Python
django基于restframework的CBV封装详解
2019/08/08 Python
Python实现投影法分割图像示例(二)
2020/01/17 Python
python基于property()函数定义属性
2020/01/22 Python
python实现超级玛丽游戏
2020/03/18 Python
html5+css3之制作header实例与更新
2020/12/21 HTML / CSS
波兰在线体育用品商店:Hop-Sport.pl
2019/07/23 全球购物
乌克兰移动电子产品和相关配件的在线商店:iTMag
2020/03/16 全球购物
物流仓管员工作职责
2014/01/06 职场文书
英语专业毕业生求职信
2014/05/24 职场文书
五四青年节演讲稿
2014/05/26 职场文书
学校安全生产月活动总结
2014/07/05 职场文书
干部作风建设个人剖析材料
2014/10/11 职场文书
CSS 一行代码实现头像与国旗的融合
2021/10/24 HTML / CSS
Windows Server 2008配置防火墙策略详解
2022/06/28 Servers