Jquery弹窗组件
2013-08-27 13:41 龙恩0707 阅读(1194) 评论(0) 编辑 收藏 举报下面是写的简单的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(('.'+clickElem)){
self.clickElem = .isPlainObject(container)){
self.container = container;
}else if(/^\./.test(container)){
self.container = ('.'+container)){
self.container = .extend(WindowAlert.Config,config || {});
self.config = config || {};
self._init();
// 显示后 回调
callback && callback();
// 点击关闭按钮
(window).bind('resize',function(){
t && clearTimeout(t);
var t = setTimeout(function(){
if(!(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 = ('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({'position':'absolute','top':0,'left':0,'z-index':1});
}
self.show();
self._showDialog(self.container);
});
})
},
flag: false,
_showDialog: function(container){
var self = this;
(window).height() - (document).scrollTop(),
offsetLeft = Math.floor(((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>');
});
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· go语言实现终端里的倒计时
· 如何编写易于单元测试的代码
· 10年+ .NET Coder 心语,封装的思维:从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热?
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· 周边上新:园子的第一款马克杯温暖上架
· 分享 3 个 .NET 开源的文件压缩处理库,助力快速实现文件压缩解压功能!
· Ollama——大语言模型本地部署的极速利器
· DeepSeek如何颠覆传统软件测试?测试工程师会被淘汰吗?
· 使用C#创建一个MCP客户端