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 相关文章推荐
IE和FireFox(FF)中js和css的不同
Apr 13 Javascript
JQery 渐变图片导航效果代码 漂亮
Jan 01 Javascript
捕获浏览器关闭、刷新事件不同情况下的处理方法
Jun 02 Javascript
Document:getElementsByName()使用方法及示例
Oct 28 Javascript
Javascript学习笔记之数组的构造函数
Nov 23 Javascript
javascript实现点击提交按钮后显示loading的方法
Jul 03 Javascript
谈谈javascript中使用连等赋值操作带来的问题
Nov 26 Javascript
js获取及修改网页背景色和字体色的方法
Dec 29 Javascript
禁用backspace网页回退功能的实现代码
Nov 15 Javascript
Vue组件开发初探
Feb 14 Javascript
在Bootstrap开发框架中使用dataTable直接录入表格行数据的方法
Oct 25 Javascript
如何在JavaScript中使用localStorage详情
Feb 04 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
DIY实用性框形天线
2021/03/02 无线电
mysql5写入和读出乱码解决
2006/11/25 PHP
How do I change MySQL timezone?
2008/03/26 PHP
php实现从ftp服务器上下载文件树到本地电脑的程序
2009/02/10 PHP
作为PHP程序员应该了解MongoDB的五件事
2013/06/03 PHP
php读取mysql的简单实例
2014/01/15 PHP
PHP Reflection API详解
2015/05/12 PHP
php使用include 和require引入文件的区别
2017/02/16 PHP
PHP使用POP3读取邮箱接收邮件的示例代码
2020/07/08 PHP
jQuery 遍历- 关于closest() 的方法介绍以及与parents()的方法区别分析
2013/04/26 Javascript
js改变文章字体大小的实例代码
2013/11/27 Javascript
推荐25个超炫的jQuery网格插件
2014/11/28 Javascript
js利用正则表达式检验输入内容是否为网址
2016/07/05 Javascript
vue.js从安装到搭建过程详解
2017/03/17 Javascript
vue中动态绑定表单元素的属性方法
2018/02/23 Javascript
vue cli 全面解析
2018/02/28 Javascript
React为 Vue 引入容器组件和展示组件的教程详解
2018/05/03 Javascript
原生js实现trigger方法示例代码
2019/05/22 Javascript
详细讲解如何创建, 发布自己的 Vue UI 组件库
2019/05/29 Javascript
JS Array.from()将伪数组转换成数组的方法示例
2020/03/23 Javascript
微信小程序实现简单购物车功能
2020/12/30 Javascript
Python多线程和队列操作实例
2015/06/21 Python
python开发中range()函数用法实例分析
2015/11/12 Python
Python 专题二 条件语句和循环语句的基础知识
2017/03/19 Python
解决pycharm无法识别本地site-packages的问题
2018/10/13 Python
python取数作为临时极大值(极小值)的方法
2018/10/15 Python
Python读取csv文件分隔符设置方法
2019/01/14 Python
Django中使用极验Geetest滑动验证码过程解析
2019/07/31 Python
Python FTP文件定时自动下载实现过程解析
2019/11/12 Python
Python Django路径配置实现过程解析
2020/11/05 Python
HTML5中的Article和Section元素认识及使用
2013/03/22 HTML / CSS
瑞士国际航空官网:SWISS
2016/07/21 全球购物
大学毕业生个人自荐书
2014/07/02 职场文书
幼儿教师小班个人总结
2015/02/05 职场文书
计划生育责任书
2015/05/09 职场文书
用React Native制作一个简单的游戏引擎
2021/05/27 Javascript