一、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.confirm和confirm的使用示例：
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;
};
}
原创文章，作者：CYEA，如若转载，请注明出处：https://www.506064.com/n/135618.html
微信扫一扫 
支付宝扫一扫 