溫馨提示×

溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》

js自定義彈框插件的封裝

發(fā)布時間：2020-09-19 12:17:48 來源：腳本之家 閱讀：172 作者：liliangel 欄目：web開發(fā)

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

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

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

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

一些默認屬性值

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

var defaultOpts = {
        title: '',//標(biāo)題
        content: '',//內(nèi)容 文字 || html
        height: 50,//默認屏幕（父級）的50%
        width: 80,//默認屏幕（父級）的80%
        type: 'alert-default',//彈框類型
        effect: 'fadeIn',//出現(xiàn)效果，默認下跌落
        delayTime: 500,//效果延時時間，默認.5s
        autoClose: false,//自動關(guān)閉
        autoTime: 2000, //自動關(guā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//空白處點擊關(guān)閉
      }

    for (i in defaultOpts) {
      if (opts[i] === undefined) {
        opts[i] = defaultOpts[i]
      }
    }
　　
　　opts.before && opts.before()

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

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

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是傳進來的高（百分比），top距離屏幕頂端距離百分比為 100-傳進來的高 /2 ，這樣就實現(xiàn)了垂直居中，同理寬度也一樣。這種水平垂直居中的辦法也是自己長期實踐總結(jié)出來自己認為最簡單最實用的，兼容各種屏幕大小，當(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'
    })

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

彈框效果

我這里實現(xiàn)了四個效果，分別是fadeIn跌落，sideLeft從左側(cè)飛入，scale放大，info提示信息?？梢钥吹剑沂嵌x了一個集合對象，分別放置了對應(yīng)的css屬性，然后通過兩個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)

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

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

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

自動關(guān)閉

當(dāng)autoClose為true，并且autoTime大于零時，用一個延時事件自動關(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; /*動畫名稱*/
      -webkit-animation-iteration-count: 1; /*動畫次數(shù)*/
      -webkit-animation-delay: 0s; /*延遲時間*/
    }
    .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>

js

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: '<h2 >我是彈框</h2>',
          effect: $(event.currentTarget).attr('data-flag'),
          blankclose: true,
          //autoClose: true
        })
      })
    })
  })

效果圖

js自定義彈框插件的封裝

完整的代碼已上傳github： https://github.com/helijun/component/tree/master/alert

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持億速云。

向AI問一下細節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進行舉報，并提供相關(guān)證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手