单独封装alert和comfirm

作者: smallzip | 来源:发表于2019-06-09 21:39 被阅读0次

说明：单独封装alert和comfirm可以保持设计稿的ui，顺便兼容其他浏览器保持ui统一。

思路：直接覆盖浏览器默认的alert和confirm方法

<!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) :　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>

效果如下图↓

alert.gif

可以把文件拆分成公用的js和css，在项目中全局使用

命名为alert.js

//  事件回调
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) : 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);
}

命名为alert.css

    #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;
    }

html文件引入

<!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">
    <link rel="stylesheet" href="alert.css">
    <script src="alert.js"></script>
    <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;
    }
</style>

<body>
    <div onclick="openAlert()">测试alert</div>
    <div>测试confirm</div>
</body>

<script>
    function openAlert() {
        alert(`测试内容`)
    }

    function openConfirm() {
        confirm(`测试内容`, (e) => {
            e ? alert(`点击了确认`) : alert(`点击了取消`)
        }, 1, 400)
    }
</script>

</html>

单独封装alert和comfirm

效果如下图↓

命名为alert.js

命名为alert.css

html文件引入

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读