一、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/zh-tw/n/135618.html
微信掃一掃 
支付寶掃一掃 