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 相关文章推荐
js判断输入是否为数字的具体实例
Aug 03 Javascript
获取当前点击按钮的id用this.id实现
Mar 17 Javascript
js实现iframe自动自适应高度的方法
Feb 17 Javascript
JavaScript箭头函数_动力节点Java学院整理
Jun 28 Javascript
js实现微信/QQ直接跳转到支付宝APP打开口令领红包功能
Jan 09 Javascript
浅谈super-vuex使用体验
Jun 25 Javascript
使用vue-cli脚手架工具搭建vue-webpack项目
Jan 14 Javascript
vue实现的仿淘宝购物车功能详解
Jan 27 Javascript
浅析vue中的MVVM实现原理
Mar 04 Javascript
elementUI Tree 树形控件的官方使用文档
Apr 25 Javascript
JavaScript页面倒计时功能完整示例
May 15 Javascript
深入解读VUE中的异步渲染的实现
Jun 19 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
php学习笔记 php中面向对象三大特性之一[封装性]的应用
2011/06/13 PHP
windows下安装php的memcache模块的方法
2015/04/07 PHP
阿里云的WindowsServer2016上部署php+apache
2018/07/17 PHP
JS解密入门 最终变量劫持
2008/06/25 Javascript
jQuery实现监控页面所有ajax请求的方法
2015/12/10 Javascript
JavaScript如何实现对数字保留两位小数一位自动补零
2015/12/18 Javascript
JS组件Bootstrap实现下拉菜单效果代码
2016/04/26 Javascript
Vue 父子组件、组件间通信
2017/03/08 Javascript
Vue2.0基于vue-cli+webpack Vuex的用法(实例讲解)
2017/09/15 Javascript
React Native验证码倒计时工具类分享
2017/10/24 Javascript
详解JS模块导入导出
2017/12/20 Javascript
Javascript异步执行不按顺序解决方案
2020/04/30 Javascript
[44:22]完美世界DOTA2联赛循环赛 FTD vs PXG BO2第一场 11.01
2020/11/02 DOTA
python入门前的第一课 python怎样入门
2018/03/06 Python
利用Python如何将数据写到CSV文件中
2018/06/05 Python
对python list 遍历删除的正确方法详解
2018/06/29 Python
解决tensorflow测试模型时NotFoundError错误的问题
2018/07/27 Python
pandas 快速处理 date_time 日期格式方法
2018/11/12 Python
OpenCV+Python--RGB转HSI的实现
2019/11/27 Python
Pyecharts绘制全球流向图的示例代码
2020/01/08 Python
Python的in,is和id函数代码实例
2020/04/18 Python
python requests.get带header
2020/05/05 Python
python3.6环境下安装freetype库和基本使用方法(推荐)
2020/05/10 Python
python实现简单的学生管理系统
2021/02/22 Python
大学毕业感言50字
2014/02/07 职场文书
原材料检验岗位职责
2014/03/15 职场文书
班主任经验交流会主持词
2014/04/01 职场文书
2014最新党员批评与自我批评材料
2014/09/24 职场文书
故意伤害人身损害赔偿协议书
2014/11/19 职场文书
2015年预算员工作总结
2015/05/14 职场文书
2015年防汛工作总结
2015/05/15 职场文书
2016参观监狱警示教育活动心得体会
2016/01/15 职场文书
《哪吒之魔童降世》观后感:世上哪有随随便便的成功
2019/11/08 职场文书
详解MySQL事务的隔离级别与MVCC
2021/04/22 MySQL
MySQL之PXC集群搭建的方法步骤
2021/05/25 MySQL
7个关于Python的经典基础案例
2021/11/07 Python