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 中debug方式
Feb 07 Javascript
document.getElementById的简写方式(获取id对象的简略写法)
Sep 10 Javascript
表头固定(利用jquery实现原理介绍)
Nov 08 Javascript
Jquery对数组的操作技巧整理
Mar 25 Javascript
javascript中SetInterval与setTimeout的定时器用法
Aug 24 Javascript
js实现多图左右切换功能
Aug 04 Javascript
jquery根据一个值来选中select下的option实例代码
Aug 29 Javascript
jQuery实现的多张图无缝滚动效果【测试可用】
Sep 12 Javascript
jQuery如何解决IE输入框不能输入的问题
Oct 08 Javascript
详解用vue.js和laravel实现微信授权登陆
Jun 23 Javascript
p5.js入门教程之图片加载
Mar 20 Javascript
JS如何实现网站中PC端和手机端自动识别并跳转对应的代码
Jan 08 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统计数组元素个数的方法
2015/07/02 PHP
PHP 7.0.2 正式版发布
2016/01/08 PHP
键盘控制事件应用教程大全
2006/11/24 Javascript
用jquery实现学校的校历(asp.net+jquery ui 1.72)
2010/01/01 Javascript
简单实例处理url特殊符号&amp;处理(2种方法)
2013/04/02 Javascript
js获得网页背景色和字体色的方法
2014/03/21 Javascript
浅谈EasyUI中Treegrid节点的删除
2015/03/01 Javascript
关于cookie的初识和运用(js和jq)
2016/04/07 Javascript
jQuery 自定义下拉框(DropDown)附源码下载
2016/07/22 Javascript
Angular2内置指令NgFor和NgIf详解
2016/08/03 Javascript
Javascript实现倒计时(防页面刷新)实例
2016/12/13 Javascript
利用Js+Css实现折纸动态导航效果实例源码
2017/01/25 Javascript
Node.js数据库操作之连接MySQL数据库(一)
2017/03/04 Javascript
jQuery开源组件BootstrapValidator使用详解
2017/06/29 jQuery
JS实现读取xml内容并输出到div中的方法示例
2018/04/19 Javascript
Vue中的验证登录状态的实现方法
2019/03/09 Javascript
JS中的防抖与节流及作用详解
2019/04/01 Javascript
vue以组件或者插件的形式实现throttle或者debounce
2019/05/22 Javascript
nodejs语言实现验证码生成功能的示例代码
2019/10/13 NodeJs
[02:08]2014DOTA2国际邀请赛 430专访:力争取得小组前二
2014/07/11 DOTA
Python实现抓取网页并且解析的实例
2014/09/20 Python
Linux下python制作名片示例
2018/07/20 Python
python 的 openpyxl模块 读取 Excel文件的方法
2019/09/09 Python
TensorFlow Saver:保存和读取模型参数.ckpt实例
2020/02/10 Python
python实现简单颜色识别程序
2020/02/19 Python
解决python脚本中error: unrecognized arguments: True错误
2020/04/20 Python
python实现四人制扑克牌游戏
2020/04/22 Python
如何在scrapy中捕获并处理各种异常
2020/09/28 Python
详解css position 5种不同的值的用法
2019/07/30 HTML / CSS
美国网上购买眼镜:Eyeconic
2017/07/29 全球购物
顺丰快递Java软件工程师面试题
2015/07/31 面试题
给老师的道歉信
2014/01/11 职场文书
论文评语大全
2014/04/29 职场文书
中共广东省委常委会党的群众路线教育实践活动整改方案
2014/09/23 职场文书
2015年行政人事部工作总结
2015/05/13 职场文书
2016年万圣节活动总结
2016/04/05 职场文书