JS編寫簡單的彈窗插件(含有demo和源碼)

        最近項目做完了 事情不是很多，今天正好也在調休，所以趁着這個時間研究了一下簡易的JS彈窗功能，當然網上這塊插件非常多，本人也沒有仔細看網上的插件源碼 只是憑着日常使用過的彈窗插件有這么多功能 來實現自己的彈窗思路，當然我這個可能實現了基本功能，那么如果想做的更好 更完善需要以后繼續優化！如果有不足之處！請大家多多諒解！

       由於彈窗大家都知道是個什么樣的 所以這次沒有做演示效果圖！目前測試下：支持IE6+ 火狐 谷歌游覽器等。

       先來看看此組件的基本配置項：如下：

this.config = {

        targetCls          :   '.clickElem',          // 點擊元素
        title              :  '我是龍恩',             // 窗口標題
        content            :  'text:<p style="width:100px;height:100px">我是龍恩</p>',
        //content            :  'img:http://gtms01.alicdn.com/tps/i1/T1USkqFc0dXXb5rXb6-1060-300.jpg',
                                                      // 窗口內容 {text:具體內容 | id:id名 | img:圖片鏈接 | 
                                                      // iframe:src鏈接} {string}                                                                                             
        width              :  400,                    // 內容的寬度
        height             :  300,                    // 內容的高度
        theight            :  30,                     // 標題的高度 默認為30
        drag               :  true,                   // 是否可以拖動 默認為true
        time               :  3000,                   // 自動關閉窗口的時間 為空或者'undefined'則不關閉
        showBg             :  true,                   // 設置是否顯示遮罩層 默認為true 遮罩
        closable           :  '#window-close',        // 關閉按鈕
        bgColor            :  '#000',                 // 默認顏色
        opacity            : 0.5,                     // 默認透明度
        position           : {
            x: 0,
            y: 0                                      //默認等於0 居中
        },
        zIndex             :                          10000,
        isScroll           : true,                    //默認情況下 窗口隨着滾動而滾動
        isResize           : true,                    // 默認情況下 隨着窗口縮放而縮放
        callback           : null                     //彈窗顯示后回調函數

    };

1. 支持配置標題 內容，標題的高度 內容的寬度和高度 窗口是否可以拖動 彈窗后是否自動關閉 是否顯示遮罩背景 顏色 及 透明度的配置，及窗口的展示位置 默認x軸0 y軸0是居中對齊，也可以自己配置x軸  y軸的位置 但是要注意是相對於父元素那個X軸 y軸 如果不指定父元素的相對定位 那么默認情況下會相對於document的。當然窗口內容的寬度和高度不建議超過游覽器的一屏幕的寬度和高度 盡量小於第一屏的寬度和高度 因為我以前用別人的彈窗插件會存在點擊關閉按鈕后 由於游覽器有滾動條 點擊后觸發滾動條事件 導致關閉不了窗口 如果內容寬度和高度很大的話 也沒有關系 窗口自動會出現滾動條的。

2. 窗口的內容配置項 支持四種 1.text（文本） 可以如下配置 text:<p style="width:100px;height:100px">我是龍恩</p>

                                       2. img（圖片） 可以如下配置 img:http://gtms01.alicdn.com/tps/i1/T1USkqFc0dXXb5rXb6-1060-300.jpg

                                       3. id（id節點）  可以如下配置 'id:XX'

                                       4. iframe          可以如下配置 'iframe:http://www.baidu.com(iframe地址)'

3. 提供彈窗后回調函數： 如彈窗后可以做自己想做的事情。

所以彈窗組件也沒有什么好說的 當然如果要用到自己的項目中 css樣式可以自己重新寫的，我JS並沒有寫死掉 只是完成JS基本彈窗業務功能。

HTML代碼如下：

<div class="clickElem" style="margin-top:10px;">我是龍恩 請點擊我</div>

<div class="clickElem" style="margin-top:10px;">我是龍恩 請點擊我</div>

CSS代碼如下：

<style type="text/css">
    *{margin:0;padding:0;list-style-type:none;}
    a,img{border:0;}
    body{font:12px/180% Arial, Helvetica, sans-serif;}
    label{cursor:pointer;}
    
    #window-box{border:5px solid #E9F3FD;background:#FFF;}
    .windown-title{position:relative;height:30px;border:1px solid #A6C9E1;overflow:hidden;background:url(images/tipbg.png) 0 0 repeat-x;}
    .window-title h2{padding-left:5px;font-size:14px;color:#666;}
    #window-close{position:absolute;right:10px;top:8px;width:10px;height:16px;text-indent:-10em;overflow:hidden;background:url(images/tipbg.png) 100% -49px no-repeat;cursor:pointer;}
    #window-content-border{padding:5px 0 5px 5px;}

</style>

JS代碼如下：

/**
 * 編寫JS彈窗組件
 * @date 2013-12-10
 * @author tugenhua
 * @email [e-mail]
 */

 function Overlay(options){
    
    this.config = {

        targetCls          :   '.clickElem',          // 點擊元素
        title              :  '我是龍恩',             // 窗口標題
        content            :  'text:<p style="width:100px;height:100px">我是龍恩</p>',
        //content            :  'img:http://gtms01.alicdn.com/tps/i1/T1USkqFc0dXXb5rXb6-1060-300.jpg',
                                                      // 窗口內容 {text:具體內容 | id:id名 | img:圖片鏈接 | 
                                                      // iframe:src鏈接} {string}                                                                                             
        width              :  400,                    // 內容的寬度
        height             :  300,                    // 內容的高度
        theight            :  30,                     // 標題的高度 默認為30
        drag               :  true,                   // 是否可以拖動 默認為true
        time               :  3000,                   // 自動關閉窗口的時間 為空或者'undefined'則不關閉
        showBg             :  true,                   // 設置是否顯示遮罩層 默認為true 遮罩
        closable           :  '#window-close',        // 關閉按鈕
        bgColor            :  '#000',                 // 默認顏色
        opacity            : 0.5,                     // 默認透明度
        position           : {
            x: 0,
            y: 0                                      //默認等於0 居中
        },
        zIndex             :                          10000,
        isScroll           : true,                    //默認情況下 窗口隨着滾動而滾動
        isResize           : true,                    // 默認情況下 隨着窗口縮放而縮放
        callback           : null                     //彈窗顯示后回調函數

    };

    this.cache = {
        isrender     :    true,            // 彈窗html結構只渲染一次
        isshow       :    false,           // 窗口是否已經顯示出來
        moveable     :    false
    };

    this.init(options);
 }

 Overlay.prototype = {
    
    constructor: Overlay,
    
    init: function(options){
        this.config = $.extend(this.config,options || {});
        var self = this,
            _config = self.config,
            _cache = self.cache;
        $(_config.targetCls).each(function(index,item){
            
            $(item).unbind('click');
            $(item).bind('click',function(){

                // 渲染彈窗HTML結構
                self._renderHTML();
                
                // 窗口移動 
                self._windowMove();
            });
        });
        
        // 窗口縮放
        self._windowResize('#window-box');

        // 窗口隨着滾動條一起滾動
        self._windowIsScroll('#window-box');

        
         
    },
    /*
     * 渲染彈窗HTML結構
     */
    _renderHTML: function(){
        var self = this,
            _config = self.config,
            _cache = self.cache;
        var html ='';
        if(_cache.isrender) {

            html+= '<div id="windowbg" style="display:none;position:absolute;top:0;left:0;"></div>' + 
                    '<div id="window-box" style="display:none;overflow:hidden;">' +
                        '<div class="window-title"><h2></h2><span id="window-close">關閉</span></div>'+
                        '<div id="window-content-border"><div id="window-content"></div></div>' + 
                    '</div>';
             
            $('body').append(html);
            
            $("#windowbg").css('z-index',_config.zIndex);
            $('#window-content-border').css({'width':_config.width + 'px','height':_config.height + 'px','overflow':'auto'});
            
            $('.window-title h2').html(_config.title);
            $('.window-title').css({'height':_config.theight + 'px','width':_config.width,'overflow':'hidden'});
            _cache.isrender = false;
            
            // 判斷傳遞進來的內容格式
            self._contentType();
            if(_config.showBg) {
                // 渲染背景寬度和高度
                self._renderDocHeight();
                $("#windowbg").show();
                
                self.show();
            }else {
                $("#windowbg").hide();
                self.show();
            }
            self._showDialogPosition("#window-box");
         }else {
            
            // 如果彈窗已經創建出來的話, 只是隱藏掉了, 那么我們顯示出來
            self.show();
            $("#windowbg").animate({"opacity":_config.opacity},'normal');
            if(_config.showBg) {
                $("#windowbg").show();
            }
            
            self._showDialogPosition("#window-box");
         }
         $(_config.closable).unbind('click');
         $(_config.closable).bind('click',function(){
            // 點擊關閉按鈕
            self._closed();
         });

         // 渲染后 回調函數
         _config.callback && $.isFunction(_config.callback) && _config.callback();
    },
    /**
     * 顯示彈窗
     */
     show: function(){
        var self = this,
            _config = self.config,
            _cache = self.cache;
        $("#window-box") && $("#window-box").show();
        _cache.isshow = true;
        if(_config.time == '' || typeof _config.time == 'undefined') {
            return;
        }else {
            t && clearTimeout(t);
        var t = setTimeout(function(){
                self._closed();
            },_config.time);
        }
     },
     /**
      * 隱藏彈窗
      */
     hide: function(){
        var self = this,
            _cache = self.cache;
        $("#window-box") && $("#window-box").hide();
        _cache.isshow = false;
     },
     /**
      *    判斷傳進來的內容類型
      */
     _contentType: function(){
        var self = this,
            _config = self.config,
            _cache = self.cache;

        var contentType =  _config.content.substring(0,_config.content.indexOf(":")),
            content = _config.content.substring(_config.content.indexOf(":")+1,_config.content.length);
        
        switch(contentType) {
            case 'text': 
                $('#window-content').html(content);
                
            break;

            case 'id':
                $('#window-content').html($('#'+content).html());
                
            break;

            case 'img':
                $('#window-content').html("<img src='"+content+"' class='window-img'/>");
                
            break;

            case 'iframe':
                $('#window-content').html('<iframe src="'+content+'" width="100%" height="100%" scrolling="yes" frameborder="0"></iframe>');
                $("#window-content-border").css({'overflow':'visible'});
                
            break;
        }
     },
     /**
      * 點擊關閉按鈕
      */
     _closed: function(){
        var self = this,
            _config = self.config,
            _cache = self.cache;
        if(_cache.isshow) {
            self.hide();
        }
        if(_config.showBg) {
            $("#windowbg").hide();
        }
        $("#windowbg").animate({"opacity":0},'normal');
     },
     /**
      * 顯示彈窗的位置 默認情況下居中
      */
     _showDialogPosition: function(container) {
         var self = this,
             _config = self.config,
             _cache = self.cache;
         $(container).css({'position':'absolute','z-index':_config.zIndex + 1});
         var offsetTop = Math.floor(($(window).height() - $(container).height())/2) + $(document).scrollTop(),
             offsetLeft = Math.floor(($(window).width() - $(container).width())/2) + $(document).scrollLeft();

         // 判斷x,y位置默認是不是等於0 如是的話 居中 否則 根據傳進來的位置重新定位
        if(0 === _config.position.x && 0 === _config.position.y){

            $(container).offset({'top':offsetTop, 'left':offsetLeft});
        }else{
            $(container).offset({'top':_config.position.y,'left':_config.position.x});
        }
     },
     /**
      * 渲染底部背景的高度
      */
      _renderDocHeight: function(){
         var self = this,
             _config = self.config;
         $("#windowbg").animate({"opacity":_config.opacity},'normal');
         if(self._isIE6()){
            $("#windowbg").css({'background':'#fff','height':$(document).height()+'px','width':$(document).width()+"px"});
         }else {
            $("#windowbg").css({'background':_config.bgColor,'height':$(document).height()+'px','width':$(document).width()+"px"});
         }
         
      },
      /*
       * 窗口縮放
       */
      _windowResize: function(elem){
         var self = this,
             _config = self.config;
         $(window).unbind('resize');
         $(window).bind('resize',function(){
             t && clearTimeout(t);
             var t = setTimeout(function(){
                 if(_config.isResize){
                     self._showDialogPosition(elem);
                     self._renderDocHeight();
                 }
             },200);
         });
      },
    /**
     * 窗口是否隨着滾動條一起滾動
     */
     _windowIsScroll: function(elem){
        var self = this,
            _config = self.config;
        $(window).unbind('scroll');
        $(window).bind('scroll',function(){
            t && clearTimeout(t);
             var t = setTimeout(function(){
                 if(_config.isScroll){
                     self._showDialogPosition(elem);
                     self._renderDocHeight();
                 }
             },200);
        });
     },
     /**
      * 窗口移動
      */
     _windowMove: function(){
        var self = this,
            _config = self.config,
            _cache = self.cache;
        var mouseX = 0,
            mouseY = 0;
        
        $('.window-title').mouseenter(function(){
            $(this).css({'cursor':'move'});
        });
        $('.window-title').mouseleave(function(){
            $(this).css({'cursor':'default'});
        });
        $('.window-title').mousedown(function(e){
            _cache.moveable = true;
            mouseX = e.clientX - $(this).offset().left;
            mouseY = e.clientY - $(this).offset().top;
            $('.window-title').css({'cursor':'move'});
        });
        $(document).mouseup(function(){
            if(!_cache.moveable) {
                return;
            }
            $('.window-title').css({'cursor':'default'});
            _cache.moveable = false;
        });
        $('#window-box').mousemove(function(e){
            
            if(_cache.moveable) {
                $(this).css({'left':e.clientX - mouseX + 'px','top':e.clientY - mouseY + 'px'});
            }
            
        });

     },
     /*
      * 判斷是否是IE6游覽器
      * @return {Boolean}
      */
     _isIE6: function(){
        return navigator.userAgent.match(/MSIE 6.0/)!= null;
     }

 };

JS簡易的彈窗組件demo下載