js自定義彈框插件的封裝

2019-11-19 16:05:08

字體：大中小

供稿：網(wǎng)友

彈出層提示信息，這是移動(dòng)前端開發(fā)中最常見的需求，你可能會(huì)想到一些流行的彈框插件，比如經(jīng)典的artDialog 炫酷的Sweetalert等等..

但是慢慢地你其實(shí)會(huì)發(fā)現(xiàn)通常情況下需求定制化要求較高，一般的彈框插件可能只滿足大部分要求，自定義花的時(shí)間還不如手動(dòng)自己封裝一個(gè)符合自己開發(fā)習(xí)慣的彈框組件，這樣后續(xù)開發(fā)效率將大大提高。

首先整理一下思路，原生javascript其實(shí)是有實(shí)現(xiàn)alert()方法的，但是那個(gè)會(huì)暫時(shí)性中斷程序運(yùn)行，并且足以讓你丑拒！那么拋開這些細(xì)細(xì)一想，其實(shí)彈框就是兩個(gè)div層，一個(gè)浮在底下的蒙層（遮罩層），將所有的元素遮起來(lái)，并且最好是半透明。另一個(gè)就是彈框主體部分了，一般情況需要水平垂直居中，并且通常包含標(biāo)題，主體內(nèi)容需要可定制，如果是模態(tài)框通常還有確認(rèn)/取消按鈕。最后就是彈出、關(guān)閉的時(shí)候一些動(dòng)效。

所以說(shuō)完全可以自己封裝一個(gè)，然后放在項(xiàng)目中公共js中去。能自己手寫的盡量不用插件....

一些默認(rèn)屬性值

通過(guò)一個(gè)foreach循環(huán)，類似于傳入的opts繼承了defaultOpts屬性，在調(diào)用彈框之前執(zhí)行的before()方法，相當(dāng)于一些準(zhǔn)備工作

var defaultOpts = {        title: '',//標(biāo)題        content: '',//內(nèi)容 文字 || html        height: 50,//默認(rèn)屏幕（父級(jí)）的50%        width: 80,//默認(rèn)屏幕（父級(jí)）的80%        type: 'alert-default',//彈框類型        effect: 'fadeIn',//出現(xiàn)效果，默認(rèn)下跌落        delayTime: 500,//效果延時(shí)時(shí)間，默認(rèn).5s        autoClose: false,//自動(dòng)關(guān)閉        autoTime: 2000, //自動(dòng)關(guān)閉時(shí)間默認(rèn)2s        autoEffect: 'default',//關(guān)閉效果        ok: '確定',        okCallback: function(){},//確定回調(diào)        cancel: '取消',        cancelCallback: function(){},//取消回調(diào)        before : function() {          console.log('before')        },         close: function() {          console.log('close')        },        blankclose: false//空白處點(diǎn)擊關(guān)閉      }    for (i in defaultOpts) {      if (opts[i] === undefined) {        opts[i] = defaultOpts[i]      }    }　　　　opts.before && opts.before()

dom結(jié)構(gòu)

定義一個(gè)數(shù)組對(duì)象，里面放彈框的dom元素，alert-mask為全屏的遮罩層，alert-content為彈框的主要內(nèi)容區(qū)，最后通過(guò).join(‘')函數(shù)將數(shù)組轉(zhuǎn)換為html ，再用jquery的append()方法追加在body節(jié)點(diǎn)最后。

var alertHtml = [        '<section class="alert-main" id="alertMain">',          '<div class="alert-mask li-opacity" id="alertMask"></div>',          '<div class="alert-content '+ opts.type +'" id="alertContent">',          opts.content +'</div>',        '</section>'      ]    $('body').append(alertHtml.join(''))

設(shè)置高寬了，水平垂直居中

我這里是采用fixed定位，然后height是傳進(jìn)來(lái)的高（百分比），top距離屏幕頂端距離百分比為 100-傳進(jìn)來(lái)的高 /2 ，這樣就實(shí)現(xiàn)了垂直居中，同理寬度也一樣。這種水平垂直居中的辦法也是自己長(zhǎng)期實(shí)踐總結(jié)出來(lái)自己認(rèn)為最簡(jiǎn)單最實(shí)用的，兼容各種屏幕大小，當(dāng)然還有很多方法，可以自行嘗試

var $alertContent = $('#alertContent'),      $alertMain = $('#alertMain');    $alertContent.css({      'height': opts.height + '%',      'top': (100 - opts.height)/2 + '%',      'width': opts.width + '%',      'left': (100 - opts.width)/2 + '%'    })    $('.li-opacity').css({      '-webkit-animation-duration' : opts.delayTime/1000 + 's'    })

最后一句是給遮罩層賦一個(gè)動(dòng)畫執(zhí)行時(shí)間，實(shí)現(xiàn)淡入效果。詳情見下面的CSS @-webkit-keyframes opacity

彈框效果

我這里實(shí)現(xiàn)了四個(gè)效果，分別是fadeIn跌落，sideLeft從左側(cè)飛入，scale放大，info提示信息。可以看到，我是定義了一個(gè)集合對(duì)象，分別放置了對(duì)應(yīng)的css屬性，然后通過(guò)兩個(gè)setTimeout函數(shù)統(tǒng)一賦值

var effect = {      'fadeIn': 'top',      'fadeInStart': '-100%',      'fadeInValue': (100 - opts.height)/2 + '%',      'sideLeft': 'left',      'sideLeftStart': '-100%',      'sideLeftValue': (100 - opts.width)/2 + '%',      'scale': '-webkit-transform',      'scaleStart': 'scale(0)',      'scaleValue': 'scale(1)',      'info': '-webkit-transform',      'infoStart': 'scale(1.2)',      'infoValue': 'scale(1)'    }    setTimeout(function(){      $alertContent.css(effect[opts.effect],effect[opts.effect + 'Start']).addClass('alert-show')      setTimeout(function(){        $alertContent.css(effect[opts.effect], effect[opts.effect + 'Value'])        opts.close && opts.close()      },10)    },opts.delayTime)

空白處點(diǎn)擊關(guān)閉

通常情況下的需求，都會(huì)是要點(diǎn)擊彈框空白處關(guān)閉彈框，一個(gè)點(diǎn)擊事件搞定，重點(diǎn)是前面的選擇器，jquery給了我們太多方便.... 當(dāng)然最后為了防止點(diǎn)擊到頁(yè)面其他元素，阻止事件冒泡，組件默認(rèn)行為..

if(opts.blankclose) {      $('.alert-main :not(.alert-content)').on('click',function(event){        $alertMain.remove()        opts.close && opts.close()        event.stopPropagation()        event.preventDefault()      })    }

自動(dòng)關(guān)閉

當(dāng)autoClose為true，并且autoTime大于零時(shí)，用一個(gè)延時(shí)事件自動(dòng)關(guān)閉彈框

if(opts.autoClose && opts.autoTime > 0) {      setTimeout(function(){$alertMain.remove()},opts.autoTime)      opts.close && opts.close()    }

演示：

css

@-webkit-keyframes opacity {      0% {        opacity: 0; /*初始狀態(tài) 透明度為0*/      }      50% {        opacity: 0; /*中間狀態(tài) 透明度為0*/      }      100% {        opacity: 1; /*結(jié)尾狀態(tài) 透明度為1*/      }    }    .li-opacity {      -webkit-animation-name: opacity; /*動(dòng)畫名稱*/      -webkit-animation-iteration-count: 1; /*動(dòng)畫次數(shù)*/      -webkit-animation-delay: 0s; /*延遲時(shí)間*/    }    .alert-mask {      position: fixed;      height: 100%;      width: 100%;      left: 0%;      top: 0%;      z-index: 9998;      background-color: rgba(0,0,0,.7);    }    .alert-content {      position: fixed;      box-sizing: border-box;      border-radius: 4px;      z-index: 9999;      -webkit-transition: .4s;      -moz-transition: .4s;      transition: .4s;      display: none;    }    .alert-show {      display: block;    }    .alert-default {      background-color: white;    }

html

<p class="alert" data-flag="fadeIn">fadeIn</p><p class="alert" data-flag="sideLeft">sideLeft</p><p class="alert" data-flag="scale">scale</p><p class="alert" data-flag="info">info</p>

require.config({  jquery:'component/jquery/jquery-3.1.0.min',  liAlert: 'li/li-alert',//常用彈框組件})require(['jquery'],function($){    require(['liAlert'],function(){      $('.alert').on('click',function(event){        $.alert({          content: '<h1 style="display:flex;justify-content:center;">我是彈框</h1>',          effect: $(event.currentTarget).attr('data-flag'),          blankclose: true,          //autoClose: true        })      })    })  })

效果圖