下面是写的简单的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弹窗组件的更多相关文章

  1. 基于JQ的自定义弹窗组件

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  2. Web jquery表格组件 JQGrid 的使用 - 从入门到精通 开篇及索引

    因为内容比较多,所以每篇讲解一些内容,最后会放出全部代码,可以参考.操作中总会遇到各式各样的问题,个人对部分问题的研究在最后一篇 问题研究 里.欢迎大家探讨学习. 代码都经过个人测试,但仍可能有各种未 ...

  3. 扩展 jquery miniui 组件实现自动查询数据

    主题 之前写过一篇文章分享了公司basecode查找数据后台是怎么实现的(http://www.cnblogs.com/abcwt112/p/6085335.html).今天想分享一下公司前台是怎么扩 ...

  4. Web jquery表格组件 JQGrid 的使用 - 11.问题研究

    系列索引 Web jquery表格组件 JQGrid 的使用 - 从入门到精通 开篇及索引 Web jquery表格组件 JQGrid 的使用 - 4.JQGrid参数.ColModel API.事件 ...

  5. Web jquery表格组件 JQGrid 的使用 - 4.JQGrid参数、ColModel API、事件及方法

    系列索引 Web jquery表格组件 JQGrid 的使用 - 从入门到精通 开篇及索引 Web jquery表格组件 JQGrid 的使用 - 4.JQGrid参数.ColModel API.事件 ...

  6. Web jquery表格组件 JQGrid 的使用 - 5.Pager翻页、搜索、格式化、自定义按钮

    系列索引 Web jquery表格组件 JQGrid 的使用 - 从入门到精通 开篇及索引 Web jquery表格组件 JQGrid 的使用 - 4.JQGrid参数.ColModel API.事件 ...

  7. Web jquery表格组件 JQGrid 的使用 - 6.准备工作 & Hello JQGrid

    系列索引 Web jquery表格组件 JQGrid 的使用 - 从入门到精通 开篇及索引 Web jquery表格组件 JQGrid 的使用 - 4.JQGrid参数.ColModel API.事件 ...

  8. Web jquery表格组件 JQGrid 的使用 - 7.查询数据、编辑数据、删除数据

    系列索引 Web jquery表格组件 JQGrid 的使用 - 从入门到精通 开篇及索引 Web jquery表格组件 JQGrid 的使用 - 4.JQGrid参数.ColModel API.事件 ...

  9. Web jquery表格组件 JQGrid 的使用 - 8.Pager、新增数据、查询、刷新、查看数据

    系列索引 Web jquery表格组件 JQGrid 的使用 - 从入门到精通 开篇及索引 Web jquery表格组件 JQGrid 的使用 - 4.JQGrid参数.ColModel API.事件 ...

随机推荐

  1. php文件与HTML页面的数据交互

    注意:首先需要保证本地配置了php开发环境,如WAMP开发环境 WAMP配置:https://www.cnblogs.com/shiyiaccn/p/9984579.html php获取HTML页面返 ...

  2. JS性能优化 之 文档片段 createDocumentFragment

    我们用原生JS进行开发时,经常会用到两种更新DOM节点的方法:innerHTML 和 appendChild() .其中 innerHTML 会完全替换掉原先的节点内容,如果我们是想向元素追加子节点的 ...

  3. Linux 下tomcat 出现 java.lang.OutOfMemoryError: unable to create new native thread

    问题现象: Tomcat(8.5.13)部署了SuperMap iServer,并发用户在100左右.系统运行一段时间后,服务崩溃.异常提示 问题分析: 1.看到日志中的提示信息后,认为是系统内存不足 ...

  4. plsql调试存储过程卡住的原因以及处理

    用PLSQL调试存储过程的时候,经常会遇到这个的情况,点调试后,继续点单步都是灰色,想停下来,但是取消也要点很多次才能取消掉. 就像下面的情况: 一直以为是个BUG,直到最近有人告诉我了真相. 出现这 ...

  5. 超级干货 :一文读懂数据可视化 ZT

    前言 数据可视化,是指将相对晦涩的的数据通过可视的.交互的方式进行展示,从而形象.直观地表达数据蕴含的信息和规律. 早期的数据可视化作为咨询机构.金融企业的专业工具,其应用领域较为单一,应用形态较为保 ...

  6. 使用Twitter异常检测框架遇到的坑

    在Github上搜索“Anomaly Detection”,Twitter的异常检测框架(基于R语言)高居榜首,可见效果应该不错: 但是活跃度并不高,3-4年没人维护了: 因此在使用时难免会遇到一些坑 ...

  7. Kotlin入门(6)条件分支的实现

    上一篇文章介绍了字符串的相关操作,其中示例代码用到了if和for语句,表面上看,Kotlin对控制语句的处理与Java很像,可实际上,Kotlin在这方面做了不少的改进,所以本篇和下一篇文章就分别介绍 ...

  8. [20171110]_allow_read_only_corruption参数.txt

    [20171110]_allow_read_only_corruption参数.txt --//昨天在修改查询隐含参数脚本时发现一个参数_allow_read_only_corruption,感觉应该 ...

  9. 【第一篇】SAP ABAP7.5x新语法之预定义数据结构

    公众号:SAP Technical 本文作者:matinal 原文出处:http://www.cnblogs.com/SAPmatinal/ 原文链接:SAP ABAP7.5x系列之预定义数据结构 前 ...

  10. 转:SQL Server中服务器角色和数据库角色权限详解

    当几个用户需要在某个特定的数据库中执行类似的动作时(这里没有相应的Windows用户组),就可以向该数据库中添加一个角色(role).数据库角色指定了可以访问相同数据库对象的一组数据库用户. 数据库角 ...