簡易Dialog封裝

根據dialog要求，需要給markDialog、box標籤寫下樣式！！！

使用方法
// Dialog.show('提示內容',{
//     //配置資訊
//     isTap:true, //是否支援點選空白出讓彈出層消失
//     isAuto:2000,//是否支援自動消失，不支援傳遞0
//     callBack:function () {/回撥函式：提示消失的時候處理什麼事情
//         
//     }
// });

/*DIALOG*/
~function(){
    class Dialog{
        constructor(con='',{
            isTap=true,
            isAuto=2000,
            callBack=new Function()
        }={}){
            //把需要使用的掛載到例項上
            this.con=con;
            this.isTap=isTap;  //是否點選
            this.isAuto=isAuto;
            this.callBack=callBack;
            //建立提示層
            this.init();
        }
        init(){
            //1.建立一個彈出層結構
            this.createMark();

            //控制消失 自動消失
            if(this.isAuto!==0){
                this.autoTimer=setTimeout(()=>{
                    this.removeMark();
                    clearInterval(this.autoTimer);
                },this.isAuto);
            }
            //點選空白消失
            if(this.isTap){
                $('.markDialog').tap(e=>{
                   let target= e.target,
                       $target=$(target),
                        $par=$target.parent();
                        if($par.hasOwnProperty('box')) return;
                        this.removeMark();
                        clearInterval(this.autoTimer);
                })

            }

        }

        createMark(){
            let sectionBox=document.createElement('section');
                sectionBox.className='markDialog';
                sectionBox.innerHTML+=`<div class="box">
            <h3>系統提示</h3>
            <div class="content">${this.con}</div>
        </div>`;

            let container=document.querySelector('.mainBox')||document.body;
            container.appendChild(sectionBox);

            //把容器和建立的盒子掛載到例項上
            this.container=container;
            this.sectionBox=sectionBox;
        }

        removeMark(){
            if(!this.sectionBox||!this.container){
                return;
            }
            this.container.removeChild(this.sectionBox);
            this.sectionBox=null;
            this.callBack(this);
        }
        static show(...arg){
          return  new Dialog(...arg);
        
    }
    window.Dialog=Dialog;
}();
複製程式碼