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 相关文章推荐
深入document.write()与HTML4.01的非成对标签的详解
May 08 Javascript
获取下拉列表框的值是数组,split,$.inArray示例
Nov 13 Javascript
JavaScript实现的一个日期格式化函数分享
Dec 06 Javascript
jQuery插件开发精品教程让你的jQuery提升一个台阶
Jan 27 Javascript
javascript每日必学之封装
Feb 23 Javascript
javascript 玩转Date对象(实例讲解)
Jul 11 Javascript
微信小程序支付功能 php后台对接完整代码分享
Jun 12 Javascript
Vue cli构建及项目打包以及出现的问题解决
Aug 27 Javascript
vue项目中使用tinymce编辑器的步骤详解
Sep 11 Javascript
vue观察模式浅析
Sep 25 Javascript
解决vue项目中页面调用数据 在数据加载完毕之前出现undefined问题
Nov 14 Javascript
iview实现图片上传功能
Jun 29 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下MYSQL limit的优化
2008/01/10 PHP
浅析PHP substr,mb_substr以及mb_strcut的区别和用法
2013/06/21 PHP
PHPMailer的主要功能特点和简单使用说明
2014/02/17 PHP
PHP实现通过中文字符比率来判断垃圾评论的方法
2014/10/20 PHP
教你php如何实现验证码
2016/01/20 PHP
DEFER怎么用?
2006/07/01 Javascript
国外的为初学者写的JavaScript教程
2008/06/09 Javascript
JQuery打造PHP的AJAX表单提交实例
2009/11/03 Javascript
jquery each()源代码
2011/02/14 Javascript
jquery全选/全不选/反选另一种实现方法(配合原生js)
2013/04/07 Javascript
Jquery动态替换div内容及动态展示的方法
2015/01/23 Javascript
JavaScript设置、获取、清除单值和多值cookie的方法
2015/11/17 Javascript
AngularJS 与百度地图的结合实例
2016/10/20 Javascript
浅谈AngularJs 双向绑定原理(数据绑定机制)
2017/12/07 Javascript
Vue 组件(component)教程之实现精美的日历方法示例
2018/01/08 Javascript
浅谈Vue2.4.0 $attrs与inheritAttrs的具体使用
2020/03/08 Javascript
webpack4从0搭建组件库的实现
2020/11/29 Javascript
Python实用日期时间处理方法汇总
2015/05/09 Python
Python操作SQLite数据库的方法详解
2017/06/16 Python
python 重命名轴索引的方法
2018/11/10 Python
在Python中预先初始化列表内容和长度的实现
2019/11/28 Python
python 实现一个反向单位矩阵示例
2019/11/29 Python
详解CSS3的图层阴影和文字阴影效果使用
2016/06/09 HTML / CSS
纽约州一群才华横溢的金匠制作而成:Hearth Jewelry
2019/03/22 全球购物
应届毕业生的个人自我鉴定
2013/10/24 职场文书
工商学院毕业生自荐信
2013/11/12 职场文书
汽车运用工程专业毕业生推荐信
2013/12/25 职场文书
运动会开幕式主持词
2014/03/28 职场文书
警校毕业生自我评价
2014/04/06 职场文书
学校总务处领导干部个人对照检查材料思想汇报
2014/10/06 职场文书
房屋租赁合同补充协议
2014/10/11 职场文书
2015年社区纪检工作总结
2015/04/21 职场文书
地震捐款简报
2015/07/21 职场文书
redis cluster支持pipeline的实现思路
2021/06/23 Redis
redis客户端实现高可用读写分离的方式详解
2021/07/04 Redis
pytorch分类模型绘制混淆矩阵以及可视化详解
2022/04/07 Python