Web右下角彈出框提示，可疊加

前言

一直想著對自己的平時學(xué)習(xí)以及工作做個總結(jié)與積累，無奈老夫?qū)嵲趹v懶。近幾日因為工作上的一些事被刺激到了，感覺和打了雞血一般：老夫要努力學(xué)習(xí)，勤奮向上。因為第一次寫博客，可已經(jīng)工作一年有余，所以記錄的都是近年的工作學(xué)習(xí)上的一些心得，記錄時間有點挨近，此事忽略即可。話不多說咱們進入正文。

正文

源碼地址
就如標(biāo)題所言，此文寫的是實現(xiàn)一個可疊加的右下角彈出框，至多顯示3個（當(dāng)然可以不限制），且看效果圖：

效果圖

此功能為對artDialog 4.1.7進行一些擴展實現(xiàn)。不會的朋友可以參考下這個demo
為什么不用最新的版本呢？看源碼嘛習(xí)慣于稍舊版本入手看。畢竟思想到了別的都好說嘛。

我們來個圖看看幾個好基友吧：


項目結(jié)構(gòu)

skins為artDialog的一些資源（css、貼圖之類的）
index.html為主界面
dialog.js為artDialog源碼（當(dāng)然這里添加了小小擴展）

思路

  1. 第一個新彈框出現(xiàn)時使用artDialog的position(left, top)方法重設(shè)其位置于右下角。


    示例圖

  2. 第二個以及之后的新彈框出現(xiàn)時呢則先將新彈框置于屏幕之下然后之前的彈框位置逐個上移，上移的高度為新彈框的高度以及彈框之間的margin


    示例圖
  3. 若發(fā)現(xiàn)現(xiàn)有的彈框已滿三個，就將最舊的那個彈框給關(guān)閉即可。

根據(jù)以上思路我們開始擼代碼
首先是我們拓展方法的框子，這里為此方法命名為msg，并將其付于artDialog對象上，此方法預(yù)留3個參數(shù)，分別為彈出框顯示的內(nèi)容（content）、多久之后關(guān)閉（time）、關(guān)閉之后的回調(diào)函數(shù)（_callback）

artDialog.msg = function(content, time, _callback) {
    
};

然后指定下彈框?qū)挾?、距離右邊的距離、彈框顯示以及關(guān)閉的時候動畫時間，以及創(chuàng)建一個彈框，然后添加一個_getWindowSize方法用于計算頁面寬度以及高度

// 保存彈框id用于獲取具體彈框
var gMsgId = [];
artDialog.msg = function(content, time, _callback) {
    var msgWidth = 320;// 彈框?qū)挾?    var rightMargin = 20;// 距離右邊的距離
    var openDuration = 200;// 彈框顯示的時候動畫時間
    var closeDuration = 100;// 彈框關(guān)閉的時候動畫時間
    // 創(chuàng)建一個彈框
    artDialog({
        title: false,
        lock: false,
        opacity: 0.1,
        width: msgWidth,
        fixed: true,
        resize: false,
        padding: 0,
        drag: false,
        init: function() {
            // 初始化時push彈框id到gMsgId
            gMsgId.push(this.config.id);
        },
        close: function() {
            if (_callback !== undefined) {
                _callback();
            }
            return false;
        }
    })
    .content('<div style="padding: 20px; border-radius: 0px; margin-bottom: 0px;">' + content + '</div>')
    .time(time ? time : 2);
    function _getWindowSize() {
        return {
            width: window.innerWidth || (window.document.documentElement.clientWidth || window.document.body.clientWidth),
            height: window.innerHeight || (window.document.documentElement.clientHeight || window.document.body.clientHeight)
        };
    }
}

根據(jù)思路圖1可知重置彈框位置時需要計算需要減去多少個彈框的高度和。所以添加個_getMsgHeight方法。有個pos參數(shù)用于指定當(dāng)前彈框在保存彈框的數(shù)組中的索引。
eg：新增彈框，之前已有2個彈框，所以目前倆個彈框，新彈框還在頁面之下，如思路圖2。此時若是重置新彈框，即pos為2的彈框，則需要計算其重置后的top值，很明顯僅需要頁面高度減去新彈框高度和一個彈框間距即可
可能這個方法還是看不懂，沒關(guān)系先放放繼續(xù)往下看即可

    function _getMsgHeight(pos) {
        var _height = 0;
        for (var i = gMsgId.length - 1; i >= pos; i--) {
            _height += art.dialog.list[gMsgId[i]].DOM.wrap[0].offsetHeight;
        }
        return _height;
    }

然后就是添加個_positionPrompt方法用于重置彈框的位置，因為彈框關(guān)閉、打開、以及網(wǎng)頁resize時需要對原有彈框位置進行重置：

  • 彈框關(guān)閉時只需重置該彈框之上的彈框的位置，彈框之下的彈框保持不變
  • 新增彈框時，之前所有的彈框均需要往上移動新彈框高度加上垂直上彈框之間距離。這里有個注意點是：將新增彈框先置于屏幕之下，然后對所有彈框進行整體上移，就會有彈框平滑出現(xiàn)的效果，見思路圖2
  • 網(wǎng)頁resize時需要重置頁面上所有彈框
    所以需要添加個type參數(shù)用于區(qū)分以上三種情況
    var _top = (_wsize.height - _getMsgHeight(i) - (l - i) * 10);
    這句代碼配上_getMsgHeight方法的那個eg代入下是不是就恍然大悟了呢 
    function _positionPrompt(type) {
        // 獲取頁面高度與寬度
        var _wsize = _getWindowSize();
        // 遍歷彈框
        for (var i = 0, l = gMsgId.length; i < l; i++) {
            // 獲取當(dāng)前彈框的重置位置之后的top值，10為彈框間距
            var _top = (_wsize.height - _getMsgHeight(i) - (l - i) * 10);
            if (type === 'close') {
                // 根據(jù)彈框id獲取到彈框DOM對象，然后使用jquery animate方法重置位置
                $(art.dialog.list[gMsgId[i]].DOM.wrap[0]).animate({
                    top: _top
                }, openDuration);
            } else if (type === 'open') {
                if (i === (l - 1)) {
                    // 若是新彈框則將其置于屏幕之下，即新彈框上邊框與頁面底部持平
                    art.dialog.list[gMsgId[i]].position(_wsize.width - msgWidth - rightMargin, _wsize.height);
                } else {
                    // 若不是新彈框則不改變高度
                    art.dialog.list[gMsgId[i]].position(_wsize.width - msgWidth - rightMargin, null);
                }
                // 根據(jù)彈框id獲取到彈框DOM對象，然后使用jquery animate方法重置位置
                $(art.dialog.list[gMsgId[i]].DOM.wrap[0]).animate({
                    top: _top
                }, openDuration);
            } else if (type === 'resize') {
                // 若是頁面resize，使用position方法重置位置
                art.dialog.list[gMsgId[i]].position(_wsize.width - msgWidth - rightMargin, _top);
            }
        }
        // 若是當(dāng)前彈框數(shù)大于3則關(guān)閉最舊的那個彈框
        if (l > 3) {
            setTimeout(function(){
                art.dialog.list[gMsgId[0]].close();
            }, openDuration);
        }
    }

現(xiàn)在添加彈框關(guān)閉邏輯以及組裝上面的方法

// 保存彈框id用于獲取具體彈框
var gMsgId = [];
artDialog.msg = function(content, time, _callback) {
    var msgWidth = 320;// 彈框?qū)挾?    var rightMargin = 20;// 距離右邊的距離
    var openDuration = 200;// 彈框顯示的時候動畫時間
    var closeDuration = 100;// 彈框關(guān)閉的時候動畫時間
    // 創(chuàng)建一個彈框
    artDialog({
        title: false,
        lock: false,
        opacity: 0.1,
        width: msgWidth,
        fixed: true,
        resize: false,
        padding: 0,
        drag: false,
        init: function() {
            gMsgId.push(this.config.id);
        },
        close: function() {
            if (_callback != undefined) {
                _callback();
            }
            // 計算被關(guān)閉的彈框在數(shù)組中的索引
            var _index = $.inArray(this.config.id, gMsgId);
            if (gMsgId.length > 3) {
                gMsgId.splice(_index, 1);
                return true;
            } else {
                // 去除數(shù)組中保存的被關(guān)閉的彈框id
                gMsgId.splice(_index, 1);
                if (_index) {
                    // 若被關(guān)閉的彈框不是最舊的，即最上面的那個，則本彈框關(guān)閉之后還需要調(diào)整其他彈框位置
                    $(art.dialog.list[this.config.id].DOM.wrap[0]).fadeOut(closeDuration, function() {
                        _positionPrompt('close');
                    });
                } else {
                    // 若被關(guān)閉的彈框是最舊的，即最上面的那個，則本彈框關(guān)閉即可
                    $(art.dialog.list[this.config.id].DOM.wrap[0]).fadeOut(closeDuration);
                }
            }
            return false;
        }
    })
    .content('<div style="padding: 20px; border-radius: 0px; margin-bottom: 0px;">' + content + '</div>')
    .time(time ? time : 2);
    // 新彈框需要觸發(fā)open類型的位置重置
    _positionPrompt('open');
    // 綁定resize
    $(window).resize(function() {
        _positionPrompt('resize');
    });

擼個界面

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" >
    <style>
        * {
            padding: 0;
            margin: 0;
        }
        #open-btn {
            width: 100%;
            height: 50px;
            text-align: center;
            background: skyblue;
            border: 0;
            color: red;
            font-size: 21px;
        }
    </style>
</head>
<body>
    <button id="open-btn">Click</button>
</body>
<script src="https://cdn.bootcss.com/jquery/1.10.1/jquery.js"></script>
<script src="./dialog.js"></script>
<script type="text/javascript">
    function randomNum(min, max) {   
        var rang = max - min;   
        var rand = Math.random();   
        return(min + Math.round(rand * rang));   
    }   
    $(document).ready(function(){
        var roster = ['pz', 'sp', 'll', 'wx'];
        $("#open-btn").on('click', function(event) {
            event.stopPropagation();
            event.preventDefault();
            art.dialog.msg(roster[randomNum(0, 3)]);
        });
    });
</script>
</html>

結(jié)語

至此大功告成。初次寫博客，功力有限。就想說，寫個博客比寫代碼累多了。/(ㄒoㄒ)/~~

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • Android 自定義View的各種姿勢1 Activity的顯示之ViewRootImpl詳解 Activity...
    passiontim閱讀 179,030評論 25贊 709
  • 2017.02.22 可以練習(xí)，每當(dāng)這個時候，腦袋就犯困，我這腦袋真是神奇呀，一說讓你做事情，你就犯困，你可不要太...
    Carden閱讀 1,490評論 0贊 1
  • 發(fā)現(xiàn) 關(guān)注 消息 iOS 第三方庫、插件、知名博客總結(jié) 作者大灰狼的小綿羊哥哥關(guān)注 2017.06.26 09:4...
    肇東周閱讀 15,296評論 4贊 61
  • 1、按別人的指引，盲目的前進，可能會一步踏空，摔得慘痛！ 2、一個誠實的敵人好過一個虛偽的朋友！ 3、老師說，每個...
    幸運地獄火閱讀 2,470評論 0贊 0
  • 霧松 頻陽人 長宵入寒無曉光 天雞遲報玉人妝 似銀素裹一身潔 如雪梨花冰代香 靚婷存芳含春意 月夜伴星影成雙 多...
    石川河女神閱讀 244評論 2贊 1

友情鏈接更多精彩內(nèi)容