js自定义重写alert 以及confirm

最新推荐文章于 2023-09-24 15:54:41 发布

walker1838

最新推荐文章于 2023-09-24 15:54:41 发布

阅读量1k

点赞数 2

分类专栏： web 文章标签： web js

本文链接：https://blog.csdn.net/qq_25194685/article/details/110875967

版权

web 专栏收录该内容

37 篇文章 0 订阅

订阅专栏

这篇博客详细介绍了如何使用JavaScript实现自定义的弹窗功能，包括MyAlert和MyConfirm两个函数。MyAlert用于创建简单的确认对话框，而MyConfirm增加了确认和取消选项。通过设置样式、元素结构和事件监听，这两个函数能够无缝融入页面并提供回调功能。

摘要由CSDN通过智能技术生成


window.MyAlert = function (data, callback,btn) { //回调函数
    btn = btn || '확인';
    var alert_bg = document.createElement('div');
    alert_box = document.createElement('div'),
        alert_text = document.createElement('div'),
        alert_btn = document.createElement('div'),
        textNode = document.createTextNode(data ? data : ''),
        btnText = document.createTextNode(btn),
    body = document.getElementsByTagName('body')[0];

    // 控制样式
    css(body, {
        "overflow":"hidden"
    });

    // 控制样式
    css(alert_bg, {
        'position': 'fixed',
        'top': '0',
        'left': '0',
        'right': '0',
        'bottom': '0',
        'background-color': 'rgba(0, 0, 0, 0.3)',
        'z-index': '999999999'
    });

    css(alert_box, {
        'width': '270px',
        'max-width': '90%',
        'font-size': '16px',
        'text-align': 'center',
        'background-color': '#fff',
        'border-radius': '15px',
        'position': 'absolute',
        'top': '50%',
        'left': '50%',
        'transform': 'translate(-50%, -50%)'
    });

    css(alert_text, {
        'padding': '20px 15px',
        'border-bottom': '1px solid #ddd'
    });

    css(alert_btn, {
        'padding': '10px 0',
        'color': '#007aff',
        'font-weight': '600',
        'cursor': 'pointer'
    });

    // 内部结构套入
    alert_text.appendChild(textNode);
    alert_btn.appendChild(btnText);
    alert_box.appendChild(alert_text);
    alert_box.appendChild(alert_btn);
    alert_bg.appendChild(alert_box);

    // 整体显示到页面内
    document.getElementsByTagName('body')[0].appendChild(alert_bg);

    // 确定绑定点击事件删除标签
    alert_btn.onclick = function () {
        alert_bg.parentNode.removeChild(alert_bg);
        body.style.overflow = 'auto'
        if (typeof callback === 'function') {
            callback(); //回调
        }
    }

}


window.MyConfirm = function (data, callback,yesBtn,noBtn) { //回调函数
    yesBtn = yesBtn || '확인';
    noBtn = noBtn || '취소';
    var confirm_bg = document.createElement('div');
    confirm_box = document.createElement('div'),
        confirm_text = document.createElement('div'),
        btn = document.createElement('div')
        yes_btn = document.createElement('div'),
        no_btn = document.createElement('div'),
        textNode = document.createTextNode(data ? data : ''),
        yesBtnText = document.createTextNode(yesBtn),
        noBtnText = document.createTextNode(noBtn),
        body = document.getElementsByTagName('body')[0];

    // 控制样式
    css(body, {
        "overflow":"hidden"
    });

    // 控制样式
    css(confirm_bg, {
        'position': 'fixed',
        'top': '0',
        'left': '0',
        'right': '0',
        'bottom': '0',
        'background-color': 'rgba(0, 0, 0, 0.3)',
        'z-index': '999999999'
    });

    css(confirm_box, {
        'width': '270px',
        'max-width': '90%',
        'font-size': '16px',
        'text-align': 'center',
        'background-color': '#fff',
        'border-radius': '15px',
        'position': 'absolute',
        'top': '50%',
        'left': '50%',
        'transform': 'translate(-50%, -50%)'
    });

    css(confirm_text, {
        'padding': '20px 15px',
        'border-bottom': '1px solid #ddd'
    });

    css(btn, {
        'text-align': 'center',
        'padding': '0 15px 12px',
        'font-weight': '600',
        'cursor': 'pointer'
    });

    css(yes_btn, {
        'padding': '0 15px',
        'color': '#007aff',
        'font-weight': '600',
        'cursor': 'pointer',
        'margin':'5px 5px 0',
        'border-radius':'2px',
        'display':'inline-block'
    });

    css(no_btn, {
        'padding': '0 15px',
        'color': '#007aff',
        'font-weight': '600',
        'cursor': 'pointer',
        'margin':'5px 5px 0',
        'border-radius':'2px',
        'display':'inline-block'
    });

    // 内部结构套入
    confirm_text.appendChild(textNode);
    yes_btn.appendChild(yesBtnText);
    no_btn.appendChild(noBtnText);
    btn.appendChild(yes_btn)
    btn.appendChild(no_btn)
    confirm_box.appendChild(confirm_text);
    // confirm_box.appendChild(yes_btn);
    confirm_box.appendChild(btn);
    confirm_bg.appendChild(confirm_box);

    // 整体显示到页面内
    document.getElementsByTagName('body')[0].appendChild(confirm_bg);

    // 确定绑定点击事件删除标签
    yes_btn.onclick = function () {
        confirm_bg.parentNode.removeChild(confirm_bg);
        body.style.overflow = 'auto'
        if (typeof callback === 'function') {
            callback(); //回调
        }
    }
    no_btn.onclick = function () {
        confirm_bg.parentNode.removeChild(confirm_bg);
        body.style.overflow = 'auto'
    }

}


function css(targetObj, cssObj) {
    var str = targetObj.getAttribute("style") ? targetObj.getAttribute('style') : '';
    for (var i in cssObj) {
        str += i + ':' + cssObj[i] + ';';
    }
    targetObj.style.cssText = str;
}