代码改变世界

Jquery弹窗组件

  龙恩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(.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();$(.kissymask).hide();if(true===isIE6)$(body).css(filter:,opacity:,backgroundcolor:,position:,top:,left:,zindex:););//(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 = (<divclass="kissymask"></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,backgroundcolor:self.config.bgColor,position:absolute,top:0,left:0,zindex:1);//IE6fixedIE6/('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,zindex:99999);varoffsetTop=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>');
        });

编辑推荐:
· go语言实现终端里的倒计时
· 如何编写易于单元测试的代码
· 10年+ .NET Coder 心语,封装的思维:从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热?
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
阅读排行:
· 周边上新:园子的第一款马克杯温暖上架
· 分享 3 个 .NET 开源的文件压缩处理库,助力快速实现文件压缩解压功能!
· Ollama——大语言模型本地部署的极速利器
· DeepSeek如何颠覆传统软件测试?测试工程师会被淘汰吗?
· 使用C#创建一个MCP客户端
点击右上角即可分享
微信分享提示