JavaScript 自定义确认删除弹窗示例与代码实现

最终呈现的交互效果如下所示：

CSS样式定义

相关的CSS样式定义保存在文件 delcss.css 中。

具体的CSS代码实现如下：

CSS代码片段：

重置默认边距与内边距：*{ margin:0; padding:0;}
定义主弹窗容器 #div1 的样式，设置宽度300px、高度100px，圆角10px，背景色为橙色 #f60，添加阴影效果，并通过绝对定位与负左边距实现水平居中，初始状态不透明且隐藏：#div1{ width:300px; height:100px; border-radius:10px; background:#f60; box-shadow:5px 5px 10px #ccc; position:absolute; left:50%; margin-left:-150px; z-index:2; opacity:0; filter:alpha(opacity:0); display:none;}
定义弹窗标题栏 h3 的样式，高度20px，背景色为蓝色 #60f：#div1 h3{ height:20px; background:#60f;}
定义遮罩层 #overlay 的样式，覆盖全屏，背景灰色，绝对定位，初始透明且隐藏：#overlay{ width:100%; height:100%; background:#ccc; position:absolute; left:0; top:0; opacity:0; z-index:1; display:none;}
定义取消按钮 #closeConfirm 的样式，宽80px高20px，居中显示，绝对定位在右下角：#closeConfirm{ width:80px; height:20px; line-height:20px; background:#ccc; border-radius:5px; display:block; text-decoration:none; color:#000; text-align:center; position:absolute; bottom:10px; right:10px;}
定义确定按钮 #trueConfirm 的样式，宽80px高20px，居中显示，绝对定位在距离右侧100px处：#trueConfirm{width:80px; height:20px; line-height:20px; background:#ccc; border-radius:5px; display:block; text-decoration:none; color:#000; text-align:center; position:absolute; bottom:10px; right:100px;}
定义内容区域 #confirmCon 的样式，文字居中，颜色浅灰，高度40px：#confirmCon{ text-align:center; color:#ccc; height:40px; line-height:40px;}

js文件confirmPop.js

JavaScript核心逻辑

JavaScript 核心逻辑文件 confirmPop.js 的代码如下：

JS代码片段：

定义构造函数 ConfirmPop，接收删除触发元素、弹窗主体、遮罩层、标题、取消按钮和确定按钮的ID作为参数：function ConfirmPop(delObj,confirmMain,overlay,binkTitle,closeConfirm,trueConfirm){
获取触发删除的元素对象：this.oDelObj=document.getElementById(delObj);
获取弹窗主体元素对象：this.oDiv=document.getElementById(confirmMain);
获取遮罩层元素对象：this.oOverlay=document.getElementById(overlay);
获取标题元素对象：this.oTitle=document.getElementById(binkTitle);
获取取消按钮元素对象：this.oCloseConfirm=document.getElementById(closeConfirm);
获取确定按钮元素对象：this.oTrueConfirm=document.getElementById(trueConfirm);
初始化垂直起始位置变量：this.oConStart=0;
初始化垂直目标位置变量：this.oConItarget=0;
调用初始化方法：this.init();
}
定义 ConfirmPop 的原型对象，包含以下方法：ConfirmPop.prototype={
初始化方法 init，计算弹窗垂直居中所需的起始和目标位置，并设置初始样式：init:function(){
计算弹窗顶部起始位置，基于视口高度与弹窗高度差：this.oConStart=parseInt((document.documentElement.clientHeight-this.oDiv.offsetHeight)/2-100);
计算弹窗垂直移动的目标位置：this.oConItarget=parseInt((document.documentElement.clientHeight-this.oDiv.offsetHeight)/2-70);
设置弹窗初始顶部位置：this.oDiv.style.top=this.oConStart+'px';
将计算出的位置值写入页面标题用于调试：document.title=this.oConStart+', '+this.oConItarget;
保存当前上下文引用：var _this=this;
为触发元素绑定点击事件：this.oDelObj.onclick=function(){
触发显示弹窗的逻辑：_this.confirmShow();
        }
为遮罩层绑定点击事件：this.oOverlay.onclick=function(){
触发标题闪烁效果：_this.titleBink();
        }
为取消和确定按钮绑定点击事件：this.oCloseConfirm.onclick=this.oTrueConfirm.onclick=function(){
触发隐藏弹窗的逻辑：_this.confirmHide();
        }
    },
显示弹窗的方法 confirmShow：confirmShow:function(){
显示遮罩层：this.oOverlay.style.display='block';
显示弹窗主体：this.oDiv.style.display='block';
调用动画函数使遮罩层透明度变为30：striveMove(this.oOverlay,{ opacity:30});
调用动画函数使弹窗移动到目标位置且透明度变为100：striveMove(this.oDiv,{top:this.oConItarget, opacity:100})
    },
标题闪烁效果方法 titleBink：titleBink:function(){
保存当前上下文引用：var _this=this;
定义定时器变量：var iLightTimer=null;
定义计数器初始值：var i=0;
设置定时器执行闪烁逻辑：iLightTimer=setInterval(function(){
判断计数器奇偶，设置标题背景色为蓝色：if(i%2){
背景色设为 #60f：_this.oTitle.style.background='#60f';
判断计数器偶数，设置标题背景色为灰色：}else{
背景色设为 #ccc：_this.oTitle.style.background='#ccc';
            }
计数器加1：i++;
当计数器大于5时：if(i>5){
清除定时器：clearInterval(iLightTimer);
            }
定时器间隔设为50毫秒：},50)
    },
隐藏弹窗的方法 confirmHide：confirmHide:function(){
调用动画函数使遮罩层透明度变为0：striveMove(this.oOverlay,{opacity:0});
隐藏遮罩层：this.oOverlay.style.display='none';
调用动画函数使弹窗回到起始位置且透明度变为0：striveMove(this.oDiv,{top:this.oConStart, opacity:0});
    }
}
通用移动动画函数 striveMove，接收元素对象、目标属性JSON及回调函数，通过 setInterval 实现平滑过渡：function striveMove(obj,json,fn){clearInterval(obj.iTimer);obj.iTimer=setInterval(function(){var bStop=true;for(var attr in json){var iCur=0;if(attr=='opacity'){iCur=Math.round(parseFloat(getStyle(obj,attr))*100);}else{iCur=parseInt(getStyle(obj,attr));}var iSpeed=(json[attr]-iCur)/8;iSpeed=iSpeed>0?Math.ceil(iSpeed):Math.floor(iSpeed);if(attr=='opacity'){obj.style.filter='alpha(opacity:'+(iCur+iSpeed)+')';obj.style.opacity=(iCur+iSpeed)/100;}else{obj.style[attr]=iCur+iSpeed+'px';}if(iCur!==json[attr]){bStop=false;}}if(bStop){clearInterval(obj.iTimer);if(fn){fn();}}},30)}

使用方法

使用方法与步骤

第一步：引入必要的CSS和JS文件。

引入代码示例：

链接CSS样式表：<link rel="stylesheet" type="text/css" href="delcss.css"/>
引入JS脚本文件：<script src="confirmPop.js"></script>

第二步：在页面加载时调用 ConfirmPop 构造函数。

调用代码示例：

脚本标签开始：<script>
绑定窗口加载和resize事件：window.onload=window.onresize=function(){
实例化 ConfirmPop 类，传入各元素ID：new ConfirmPop('btn','div1','overlay','title','closeConfirm','trueConfirm');
}
脚本标签结束：</script>

第三步：构建HTML结构，准备弹窗所需的DOM元素。

HTML结构代码示例：

弹窗主体div，ID为div1：<div id="div1">
标题h3，ID为title：<h3 id="title"></h3>
内容div，ID为confirmCon：<div id="confirmCon">
提示文字：您确定要进行删除操作么？
内容div结束：</div>
确定按钮a标签，ID为trueConfirm：<a href="###" id="trueConfirm">确定</a>
取消按钮a标签，ID为closeConfirm：<a href="###" id="closeConfirm">取消</a>
弹窗主体div结束：</div>
遮罩层div，ID为overlay：<div id="overlay"></div>

上述HTML代码提供了必要的DOM结构，开发者可根据实际需求修改。其中确定按钮的a标签href属性可填入实际的删除接口地址，点击确定后将跳转至删除处理页面。

该HTML代码可放置于页面任意位置，不会占用额外布局空间，结构简洁高效。

第四步：添加触发删除操作的元素，即“导火线”。

触发器代码示例：

带有删除图标的链接，ID设为btn：<a id="btn" ><img src="/images/default/right/ico_del.gif" /></a>

为删除图标添加 id="btn" 属性，即可触发上述定义的删除弹窗效果。

如需调整弹窗外观，可直接修改对应的CSS样式文件。

总结：此JS实现的删除确认框相比浏览器原生弹窗更加美观。作者仅用约3k代码便实现了该效果，值得借鉴。

注：本示例为引用代码。

局限性：当前实现仅支持针对单一内容进行删除操作，因为所有元素绑定均基于ID，缺乏对动态列表或多条记录的支持。

JS自定义确认删除对话框实现代码

CSS样式定义

JavaScript核心逻辑

使用方法与步骤

实用工具推荐