JS編寫簡單的彈窗外掛(含有demo和原始碼)

龍恩0707發表於2013-12-11

最近專案做完了事情不是很多，今天正好也在調休，所以趁著這個時間研究了一下簡易的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 879083421@qq.com
 */

 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;
     }

 };

View Code

JS簡易的彈窗元件demo下載

dialog.js彈窗外掛
2018-07-18
JS
編寫簡易的JS輸入框模糊查詢匹配（附有原始碼和demo）
2013-11-21
JS原始碼
編寫一個簡單的babel外掛
2018-03-25
Babel
CodeIgniter編寫的簡單留言板的DEMO
2017-11-14
寫了一個簡單好用的彈出層外掛
2016-08-11
C編寫的簡單密碼程式
2012-06-29
密碼
寫一個簡單的demo理解vuex
2017-12-28
Vue
Managed DirectX中的DirectShow應用（簡單Demo及原始碼)
2014-04-16
原始碼
手機直播原始碼，Android 簡單的彈框
2023-09-27
原始碼Android
編寫簡單的Java程式碼：HelloWorid
2024-04-29
Java
利用js編寫一個簡單的html表單驗證，驗證通過時提交資料(附原始碼)
2019-01-12
JSHTML原始碼
教你編寫 Node.js 中介軟體，實現服務端快取（附demo原始碼）
2019-03-03
Node.js服務端快取原始碼
eggjs外掛編寫
2019-03-04
JS
vue..js 編寫的簡單音樂播放器
2019-12-03
VueJS播放器
IoC容器Autofac(2) - 一個簡單示例(附demo原始碼)
2015-06-07
原始碼
利用 Powershell 編寫簡單的瀏覽器指令碼
2020-06-13
瀏覽器指令碼
python編寫的簡單的mysql巡檢指令碼
2017-10-30
PythonMySql指令碼
如何編寫Node.js外掛
2014-08-02
Node.js
編寫最簡單的核心：HelloWorld
2014-11-03
簡單的websocket demo
2021-01-16
Web
編譯FFMPEG原始碼的指令碼編寫案例
2017-10-12
編譯原始碼指令碼
node.js的編碼規範簡單介紹
2017-03-26
Node.js
Webpack外掛是如何編寫的——prerender-spa-plugin原始碼解析
2021-10-08
WebPlugin原始碼
js實現的字串簡單編碼和解碼程式碼例項
2017-03-23
JS字串
JS 簡單實現UTF-8編碼,Base64編碼
2020-01-30
JS
編寫最基本的APT Demo
2017-11-14
APT
javascript編寫一個簡單的編譯器
2017-11-01
JavaScript編譯
12款最好的 jQuery 模態視窗外掛
2014-08-10
jQuery
js自定義實現的簡單編碼和解碼程式碼例項
2017-03-27
JS
AOSP 原始碼整編單編
2019-01-02
原始碼
Java NIO的簡單demo
2018-04-07
Java
簡單驗證碼識別及工具編寫思路
2020-08-19
編寫簡單宏程式碼快速開啟Word文件
2016-06-28
手把手教你編寫最簡單的效能指令碼
2021-06-08
指令碼
編寫簡單的windows bat批處理指令碼檔案
2012-06-19
WindowsBAT指令碼
如何編寫簡潔的程式碼？
2019-02-28
編寫一個非常簡單的 JavaScript 編輯器
2017-01-29
JavaScript
JS圖片延遲載入分析及簡單的demo
2014-01-11
JS

JS編寫簡單的彈窗外掛(含有demo和原始碼)

相關文章