Jquery弹窗组件
下面是写的简单的Jquery弹窗组件 暂不支持animate,只能满足一般的弹窗显示隐藏需求,更多功能后续会完善!网上及jquery组件很多这样的弹窗,但是用别人的感觉心里过不去,所以就随便写写,当做练习下!代码如下:
/**
* fileoverview WindowAlert
* @desc jQuery弹窗组件
* @param {clickElem} 点击元素
* @param {container} 弹窗窗口最外层容器
* 默认配置参数如下:{
eventType: 'click', // 默认为点击
closed: '.closed', //关闭按钮
bgColor: '#000', //默认颜色
opacity: '0.5', // 默认透明度
position: {
x: 0, //默认情况下居中
y: 0
},
isScroll: true, //默认情况下 窗口随着滚动而滚动
isResize: true // 默认情况下 随着窗口缩放而缩放
}
* @callback 回调函数
*/
var WindowAlert = (function(){
function WindowAlert(clickElem,container,config,callback){
var self = this,
isIE6 = navigator.userAgent.match(/MSIE 6.0/)!= null;
self.isIE6 = isIE6;
if(!(self instanceof WindowAlert)){
return new WindowAlert(clickElem,container,config,callback);
}
// 匹配传参数clickElem
if($.isPlainObject(clickElem)){
self.clickElem = clickElem;
}else if(/^\./.test(clickElem)){
self.clickElem = $(clickElem);
}else if(/^#/.test(clickElem)){
self.clickElem = $(clickElem);
}else if($('.'+clickElem)){
self.clickElem = $('.'+clickElem);
}else {
throw new Error('传递参数不符合!');
}
// 匹配传参数container
if($.isPlainObject(container)){
self.container = container;
}else if(/^\./.test(container)){
self.container = $(container);
}else if(/^#/.test(container)){
self.container = $(container);
}else if($('.'+container)){
self.container = $('.'+container);
}else {
throw new Error('传递参数不符合!');
}
config = $.extend(WindowAlert.Config,config || {});
self.config = config || {};
self._init();
// 显示后 回调
callback && callback();
// 点击关闭按钮
$(self.config.closed).bind('click',function(){
self.hide();
$('.kissy-mask').hide();
if(true === isIE6) {
$('body').css({'filter':'','opacity':'','background-color':'',
'position':'','top':'','left':'','z-index':''});
}
});
// 窗口缩放
$(window).bind('resize',function(){
t && clearTimeout(t);
var t = setTimeout(function(){
if(!$(self.container).hasClass('hidden') && self.config.isResize){
self._showDialog(self.container);
}
},200);
});
// 窗口滚动
$(window).bind('scroll',function(){
t && clearTimeout(t);
var t = setTimeout(function(){
if(!$(self.container).hasClass('hidden') && self.config.isScroll){
self._showDialog(self.container);
}
},200);
});
}
// 默认配置参数
WindowAlert.Config = {
eventType: 'click', // 默认为点击
closed: '.closed', //关闭按钮
bgColor: '#000', //默认颜色
opacity: '0.5', // 默认透明度
position: {
x: 0, //默认情况下居中
y: 0
},
isScroll: true, //默认情况下 窗口随着滚动而滚动
isResize: true // 默认情况下 随着窗口缩放而缩放
};
WindowAlert.prototype = {
_init: function(){
var self = this;
$(self.clickElem).each(function(index,item){
$(item).bind(self.config.eventType,function(){
if(!self.flag){
var div = $('<div class="kissy-mask"></div>');
$('body').prepend(div);
flag = true;
}
if(false === self.isIE6) {
$('.kissy-mask').css({'opacity':self.config.opacity,'background-color':self.config.bgColor,
'position':'fixed','top':0,'left':0,'width':'100%','height':'100%','z-index':1});
}else {
/**$('body').css({'opacity':self.config.opacity,'background-color':self.config.bgColor,
'position':'absolute','top':0,'left':0,'z-index':1}); **/
/* IE6不支持fixed 所以对IE6做特殊的处理下 就空白背景*/
$('body').css({'position':'absolute','top':0,'left':0,'z-index':1});
}
self.show();
self._showDialog(self.container);
});
})
},
flag: false,
_showDialog: function(container){
var self = this;
$(container).css({'position':'absolute','z-index':99999});
var offsetTop = Math.floor(($(window).height() - $(self.container).height())/2) + $(document).scrollTop(),
offsetLeft = Math.floor(($(window).width() - $(self.container).width())/2) + $(document).scrollLeft();
// 判断x,y位置默认是不是等于0 如是的话 居中 否则 根据传进来的位置重新定位
if(0 === self.config.position.x && 0 === self.config.position.y){
$(container).offset({'top':offsetTop, 'left':offsetLeft});
}else{
$(container).offset({'top':self.config.position.y,'left':self.config.position.x});
}
},
hide: function(){
var self = this;
if(!$(self.container).hasClass('hidden')){
$(self.container).addClass('hidden');
}
},
show: function(){
var self = this;
if($(self.container).hasClass('hidden')){
$(self.container).removeClass('hidden');
}
},
// 销毁
destory: function(){
var self = this;
$(self.clickElem).each(function(index,item){
$(item).unbind(self.config.eventType);
});
self.clickElem = [];
self.container = [];
}
};
return WindowAlert;
})();
调用方式如下 :
new WindowAlert(要点击的元素,弹窗的外层容器,{},function(){
$('.windowAlert').append('<div class="closed">XXX</div>');
});
Jquery弹窗组件的更多相关文章
- 基于JQ的自定义弹窗组件
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- Web jquery表格组件 JQGrid 的使用 - 从入门到精通 开篇及索引
因为内容比较多,所以每篇讲解一些内容,最后会放出全部代码,可以参考.操作中总会遇到各式各样的问题,个人对部分问题的研究在最后一篇 问题研究 里.欢迎大家探讨学习. 代码都经过个人测试,但仍可能有各种未 ...
- 扩展 jquery miniui 组件实现自动查询数据
主题 之前写过一篇文章分享了公司basecode查找数据后台是怎么实现的(http://www.cnblogs.com/abcwt112/p/6085335.html).今天想分享一下公司前台是怎么扩 ...
- Web jquery表格组件 JQGrid 的使用 - 11.问题研究
系列索引 Web jquery表格组件 JQGrid 的使用 - 从入门到精通 开篇及索引 Web jquery表格组件 JQGrid 的使用 - 4.JQGrid参数.ColModel API.事件 ...
- Web jquery表格组件 JQGrid 的使用 - 4.JQGrid参数、ColModel API、事件及方法
系列索引 Web jquery表格组件 JQGrid 的使用 - 从入门到精通 开篇及索引 Web jquery表格组件 JQGrid 的使用 - 4.JQGrid参数.ColModel API.事件 ...
- Web jquery表格组件 JQGrid 的使用 - 5.Pager翻页、搜索、格式化、自定义按钮
系列索引 Web jquery表格组件 JQGrid 的使用 - 从入门到精通 开篇及索引 Web jquery表格组件 JQGrid 的使用 - 4.JQGrid参数.ColModel API.事件 ...
- Web jquery表格组件 JQGrid 的使用 - 6.准备工作 & Hello JQGrid
系列索引 Web jquery表格组件 JQGrid 的使用 - 从入门到精通 开篇及索引 Web jquery表格组件 JQGrid 的使用 - 4.JQGrid参数.ColModel API.事件 ...
- Web jquery表格组件 JQGrid 的使用 - 7.查询数据、编辑数据、删除数据
系列索引 Web jquery表格组件 JQGrid 的使用 - 从入门到精通 开篇及索引 Web jquery表格组件 JQGrid 的使用 - 4.JQGrid参数.ColModel API.事件 ...
- Web jquery表格组件 JQGrid 的使用 - 8.Pager、新增数据、查询、刷新、查看数据
系列索引 Web jquery表格组件 JQGrid 的使用 - 从入门到精通 开篇及索引 Web jquery表格组件 JQGrid 的使用 - 4.JQGrid参数.ColModel API.事件 ...
随机推荐
- Java 支付宝支付,退款,单笔转账到支付宝账户(支付宝支付)
最近一直在接触第三方,刚接入完支付宝的API做一下总结,个人能力薄弱有不对的地方望指教. 做的是一个小型电商项目,所以会接入第三方的支付和登入功能, 第一次接入第三方撸了很多官方文档. 进入主题, ...
- 两个inline-block消除间距和对齐(vertical-align)
一.神奇的两个inline-block 很初级的问题,无聊决定写一个故事. 故事的主人公很简单,两个inline-block元素.代码如下,为了看起来简单明了,写得很简陋.效果图如右.发现有两个问题. ...
- maven 技巧
M2Eclipse Releases maven eclipse插件最新安装地址 Full Version Tag 1.0 2011-06-22 http://download.eclipse.org ...
- PHP会话(Session)实现用户登陆功能 转自#落人间#
对比起 Cookie,Session 是存储在服务器端的会话,相对安全,并且不像 Cookie 那样有存储长度限制,本文简单介绍 Session 的使用. 由于 Session 是以文本文件形式存储在 ...
- .NET代码设计简单规范
以下转载于:http://www.it28.cn/ASPNET/825095.html 下面这个规范是我为朋友写的几点建议,写的很范,作为BLOG,愿与大家一起分享.只给出部分设计规范样例,关于.NE ...
- Use Slim to overview model in Tensorflow like model.summary() in Keras
model.summary() in Tensorflow like Keras Use Slim Example: import numpy as np from tensorflow.python ...
- python爬虫之pyquery学习
相关内容: pyquery的介绍 pyquery的使用 安装模块 导入模块 解析对象初始化 css选择器 在选定元素之后的元素再选取 元素的文本.属性等内容的获取 pyquery执行DOM操作.css ...
- python中json序列化的东东
之所以写这个因为自己总是弄混了,容易弄错,记下来有事没事看看 序列化是指把变量从内存中变成可存储或传输的过程称之为序列化用(使用dump或者dumps),把变量内容从序列化的对象重新读到 内存里称 ...
- shell脚本之数组
变量:存储单个元素的内存空间. 数组:存储多个元素的连续的内存空间. 数组名:整个数组只有一个名字: 数组索引:编号从0开始: 数组名[索引]: 引用数组中的某个元素:${ ARRAY_NAME [ ...
- Linux之shell脚本for、while、case语句的高级用法
1.case语句的用法: [root@ELK-chaofeng test]# cat test3.sh #!/bin/bash while true ;do read -p "please ...