一、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