window.confirm详解

发布时间:2023-05-18

一、window.confirm未定义

在使用window.confirm函数时,如果控制台输出“window.confirm is not a function”,有可能是因为该函数被重写了或者被删除了,此时需要确认是否有其他代码在页面中重写或者删除了该函数。 可以使用以下方法来检测window.confirm函数是否存在:

if(typeof window.confirm !== 'function'){
    alert('window.confirm未定义!');
}

二、window.confirm与confirm区别

confirm是JavaScript内置的函数,而window.confirm是浏览器提供的全局对象中的一个方法。 二者在功能上没有区别,都是弹出一个对话框,提示用户是否继续操作。但是,window.confirm函数只能在浏览器中使用,而confirm函数可以在不同的环境中使用,如Node.js等。 以下是window.confirmconfirm的使用示例:

window.confirm("确定要删除此项吗?");
confirm("此操作不可撤销,是否继续?");

三、阻止window.confirm函数执行

可以通过在window.confirm函数前加return false来阻止window.confirm函数的执行,从而阻止默认的对话框弹出。 以下是使用return false阻止window.confirm函数的执行的示例:

function onDelete(){
    if(!confirm("确定要删除此项吗?")){
        return false;
    }
    //执行删除操作...
}

四、自定义window.confirm对话框

可以使用CSS和JavaScript自定义window.confirm的样式。 HTML部分:

<button onclick="showCustomConfirm()">自定义window.confirm</button>

CSS部分:

/*弹出框样式*/
.custom-confirm-box {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    width: 300px;
    padding: 20px;
    background-color: #fff;
    border: 1px solid #ccc;
    box-shadow: 0 0 10px #ddd;
    border-radius: 4px;
    z-index: 999;
}
/*按钮样式*/
.custom-confirm-button {
    width: 100px;
    height: 30px;
    text-align: center;
    line-height: 30px;
    background-color: #f00;
    color: #fff;
    border-radius: 4px;
    cursor: pointer;
}
.custom-confirm-button:hover {
    background-color: #f60;
}

JavaScript部分:

function showCustomConfirm(){
    //创建遮罩层
    var mask = document.createElement('div');
    mask.style.position = 'fixed';
    mask.style.top = '0';
    mask.style.left = '0';
    mask.style.width = '100%';
    mask.style.height = '100%';
    mask.style.backgroundColor = 'rgba(0,0,0,0.4)';
    document.body.appendChild(mask);
    //创建弹出框
    var box = document.createElement('div');
    box.className = 'custom-confirm-box';
    box.innerHTML = '<p>自定义window.confirm</p><p>确定要删除此项吗?</p><div><button class="custom-confirm-button">确定</button><button class="custom-confirm-button">取消</button></div>';
    document.body.appendChild(box);
    //绑定事件
    var buttons = box.querySelectorAll('.custom-confirm-button');
    buttons[0].onclick = function(){
        //点击确定按钮后执行的操作
        mask.remove();
        box.remove();
    };
    buttons[1].onclick = function(){
        //点击取消按钮后执行的操作
        mask.remove();
        box.remove();
    }
}

五、兼容IE6-IE7的window.confirm方法

在IE6-IE7中,window.confirm默认样式与弹出框样式相同,并且无法自定义,同时,由于IE6-IE7中没有window.confirm方法,所以需要手动模拟。 以下是兼容IE6-IE7的window.confirm方法的示例:

//定义window.confirm方法
if (!window.confirm) {
    window.confirm = function (msg, title) {
        title = title || '提示';
        //模拟弹出框
        var box = document.createElement('div');
        box.style.position = 'absolute';
        box.style.top = '50%';
        box.style.left = '50%';
        box.style.transform = 'translate(-50%,-50%)';
        box.style.width = '300px';
        box.style.padding = '20px';
        box.style.backgroundColor = '#fff';
        box.style.border = '1px solid #ccc';
        box.style.boxShadow = '0 0 10px #ddd';
        box.style.borderRadius = '4px';
        box.style.zIndex = '999';
        //标题部分
        var titleBox = document.createElement('div');
        titleBox.style.height = '30px';
        var titleSpan = document.createElement('span');
        titleSpan.style.float = 'left';
        titleSpan.style.lineHeight = '30px';
        titleSpan.style.textIndent = '10px';
        titleSpan.innerHTML = title;
        var closeSpan = document.createElement('span');
        closeSpan.style.float = 'right';
        closeSpan.style.lineHeight = '30px';
        closeSpan.style.textAlign = 'center';
        closeSpan.style.width = '30px';
        closeSpan.style.cursor = 'pointer';
        closeSpan.innerHTML = '×';
        closeSpan.onclick = function () {
            document.body.removeChild(mask);
            document.body.removeChild(box);
            return false;
        };
        titleBox.appendChild(titleSpan);
        titleBox.appendChild(closeSpan);
        //内容部分
        var msgBox = document.createElement('div');
        msgBox.style.padding = '10px';
        msgBox.style.borderTop = '1px solid #ddd';
        msgBox.style.borderBottom = '1px solid #ddd';
        msgBox.innerHTML = msg;
        //按钮部分
        var btnBox = document.createElement('div');
        btnBox.style.height = '50px';
        btnBox.style.lineHeight = '50px';
        btnBox.style.textAlign = 'center';
        var okBtn = document.createElement('span');
        okBtn.style.display = 'inline-block';
        okBtn.style.width = '100px';
        okBtn.style.height = '30px';
        okBtn.style.lineHeight = '30px';
        okBtn.style.backgroundColor = '#f00';
        okBtn.style.color = '#fff';
        okBtn.style.borderRadius = '4px';
        okBtn.style.marginRight = '30px';
        okBtn.style.cursor = 'pointer';
        okBtn.innerHTML = '确定';
        okBtn.onclick = function () {
            document.body.removeChild(mask);
            document.body.removeChild(box);
            return true;
        };
        var cancelBtn = document.createElement('span');
        cancelBtn.style.display = 'inline-block';
        cancelBtn.style.width = '100px';
        cancelBtn.style.height = '30px';
        cancelBtn.style.lineHeight = '30px';
        cancelBtn.style.backgroundColor = '#ccc';
        cancelBtn.style.color = '#fff';
        cancelBtn.style.borderRadius = '4px';
        cancelBtn.style.cursor = 'pointer';
        cancelBtn.innerHTML = '取消';
        cancelBtn.onclick = function () {
            document.body.removeChild(mask);
            document.body.removeChild(box);
            return false;
        };
        btnBox.appendChild(okBtn);
        btnBox.appendChild(cancelBtn);
        box.appendChild(titleBox);
        box.appendChild(msgBox);
        box.appendChild(btnBox);
        var mask = document.createElement('div');
        mask.style.position = 'fixed';
        mask.style.top = '0';
        mask.style.left = '0';
        mask.style.width = '100%';
        mask.style.height = '100%';
        mask.style.backgroundColor = 'rgba(0,0,0,0.4)';
        mask.style.zIndex = '998';
        document.body.appendChild(mask);
        document.body.appendChild(box);
        return false;
    };
}