單獨封裝alert和comfirm

時間 2019-12-05
原文原文鏈接
說明：單獨封裝alert和comfirm能夠保持設計稿的ui，順便兼容其餘瀏覽器保持ui統一。html
思路：直接覆蓋瀏覽器默認的alert和confirm方法web
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>測試4</title>
</head>
<style>
    body {
        background-image: url(http://www.cnr.cn/xjfw/btfw/2011btfw/jkwh/jkwt/20160516/W020160516492035673595.jpg);
        background-repeat: none;
        background-size: auto;
    }

    #alert-eject-frame-mask {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: rgba(255, 255, 255, .4);
        z-index: 2147483646;
    }

    #alert-eject-frame-content {
        position: absolute;
        top: 42%;
        left: calc(50% - 120px);
        width: 240px;
        background-color: #fff;
        z-index: 2147483647;
        border-radius: 5px;
        text-align: center;
        animation: showAlert .5s ease;
        -webkit-animation: showAlert .5s ease;
    }

    @keyframes showAlert {
        from {
            opacity: 0;
            transform: scale(0);
        }

        to {
            opacity: 1;
            transform: scale(1);
        }
    }

    @-webkit-keyframes showAlert

    /*Safari and Chrome*/
        {
        from {
            opacity: 0;
            transform: scale(0);
        }

        to {
            opacity: 1;
            transform: scale(1);
        }
    }

    @keyframes hideAlert {
        from {
            opacity: 1;
            transform: scale(1);
        }

        to {
            opacity: 0;
            transform: scale(0);
        }
    }

    @-webkit-keyframes hideAlert

    /*Safari and Chrome*/
        {
        from {
            opacity: 1;
            transform: scale(1);
        }

        to {
            opacity: 0;
            transform: scale(0);
        }
    }

    .alert-eject-frame-txt {
        padding: 20px;
        font-size: 1.04rem;
    }

    .alert-eject-frame-buttom-cancel {
        height: 50px;
        line-height: 50px;
        border-top: 1px solid #e5e5e5;
        font-size: 1.04rem;
        color: rgb(105, 101, 101);
        cursor: pointer;
    }

    .alert-eject-frame-buttom-flex {
        display: flex;
        height: 50px;
        line-height: 50px;
        border-top: 1px solid #e5e5e5;
        font-size: 1.04rem;
        color: rgb(105, 101, 101);
        cursor: pointer;
    }

    .alert-eject-frame-buttom-flex div {
        flex: 1;
    }

    .alert-eject-frame-buttom-flex div:nth-child(1) {
        border-right: 1px solid #e5e5e5;
    }
</style>

<body>
    <div onclick="openAlert('默認alert')">默認alert</div>
    <br />
    <br />
    <div onclick="alert('alert點擊遮罩也能夠關閉',null,null,1,null)">alert點擊遮罩也能夠關閉</div>
    <br />
    <br />
    <div onclick="alert('alert自定義彈框寬度',null,null,1,400)">alert自定義彈框寬度</div>
    <br />
    <br />
    <div onclick="openConfirm('默認confirm')">默認confirm</div>
    <br />
    <br />
    <div onclick="openConfirm('confirm點擊遮罩也能夠關閉',null,1)">confirm點擊遮罩也能夠關閉</div>
    <br />
    <br />
    <div onclick="openConfirm('confirm自定義彈框寬度',null,1,400)">confirm自定義彈框寬度</div>
</body>

<script>
    function openAlert(txt, callback) {
        alert(txt,(i) => {
            //  執行回調
        })
    }

    function openConfirm(txt, btn,closeMask, alertWidth) {
        confirm(txt,(e) =>{
            e ? alert(`點擊了確認`) : alert(`點擊了取消`)
        }, closeMask, alertWidth)
    }


    //  事件回調
    let eventCallBack = null

    /*
    *  txt：必填，要顯示的內容
    *  callback：回調
    *  confirm：確認按鈕
    *  closeMask：點擊遮罩也能夠關閉
    *  lertWidth: 彈框寬度
    */
    window.alert = function (txt, callback, confirm, closeMask, alertWidth) {
        eventCallBack = callback
        //  是否須要確認按鈕
        let confirmHTML = ``
        if (confirm) {
            confirmHTML = `
            <div class="alert-eject-frame-buttom-flex">
                <div onclick="closeAlertEjectFrame(false)">取消</div>
                <div onclick="closeAlertEjectFrame(true)">確認</div>
            </div>`
        } else {
            confirmHTML = `<div onclick="closeAlertEjectFrame(false)" class="alert-eject-frame-buttom-cancel">取消</div>`
        }

        //  body插入節點
        CADN(`body`).innerHTML += `
            <div id="alert-eject-frame-mask" ${closeMask ? `onclick="closeAlertEjectFrame()"` : ``}></div>
            <div id="alert-eject-frame-content">
                <div class="alert-eject-frame-txt">${txt}</div>
                ${confirmHTML}
            </div>
            `
        //  計算彈框寬高使之居中
        alertEjectFrameSettimeout(alertWidth)
    }


    /*
    *  txt：必填，要顯示的內容
    *  btn：確認/取消按鈕 方法名稱
    *  closeMask：點擊遮罩也能夠關閉
    *  lertWidth: 彈框寬度
    */
    window.confirm = function (txt, btn, closeMask, alertWidth) {
        eventCallBack = btn
        //  body插入節點
        CADN(`body`).innerHTML += `
            <div id="alert-eject-frame-mask" ${closeMask ? `onclick="closeAlertEjectFrame()"` : ``}></div>
            <div id="alert-eject-frame-content">
                <div class="alert-eject-frame-txt">${txt}</div>
                <div class="alert-eject-frame-buttom-flex">
                    <div onclick="closeAlertEjectFrame(false)">取消</div>
                    <div onclick="closeAlertEjectFrame(true)">確認</div>
                </div>
            </div>
            `
        //  計算彈框寬高使之居中
        alertEjectFrameSettimeout(alertWidth)
    }

    //  計算彈框寬高，居中佈局
    function alertEjectFrameSettimeout(alertWidth) {
        setTimeout(() => {
            let domHeight = CADN().clientHeight                                                     //  彈框高度
            let screenHeight = document.documentElement.clientHeight || document.body.clientHeight  //  瀏覽器可視區域高度
            CADN().style.top = `${(screenHeight - domHeight) / 2}px`                                //  使得彈框垂直居中
            if (alertWidth) {                                                                       //  彈框寬度
                let screenWidth = document.documentElement.clientWidth || document.body.clientWidth //  瀏覽器可視區域高度
                CADN().style.width = `${alertWidth}px`                                              //  設置彈框寬度
                CADN().style.left = `${(screenWidth - alertWidth) / 2}px`                           //  彈框垂直居中
            }
        }, 0);
    }

    function CADN(i) {
        return i ? document.querySelector(i) : document.querySelector(`#alert-eject-frame-content`)
    }

    //  關閉彈窗
    function closeAlertEjectFrame(i) {
        i ? eventCallBack&& eventCallBack(true) :&emsp;eventCallBack&& eventCallBack(false)             //  回調參數爲布爾值
        eventCallBack = null                                                                        //  清空回調
        CADN(`#alert-eject-frame-content`).style.animation = `hideAlert .4s ease` // 執行影藏動畫
        CADN(`#alert-eject-frame-mask`).remove() // 關閉遮罩層
        setTimeout(() => {                                                                          //  等待影藏動畫執行完畢關閉彈框
            CADN(`#alert-eject-frame-content`).remove()
        }, 350);
    }

</script>
</html>
複製代碼
效果以下↓

相關標籤/搜索
每日一句
每一个你不满意的现在，都有一个你没有努力的曾经。