js代码确认示例代码,删除对话框的效果
结果如下:CSS文件delcss.css
代码如下:
复制代码代码如下所示:
*边距:0;填充:0;}
# DIV1 {宽度:300px;身高:100px;边界半径:10px;背景:# F60;盒的影子:5px 5px 10px # CCC;位置:绝对;左:左:50%;50%;# CCC;;(2);();
# DIV1 h3 {身高:20px;背景:# 60f;}
#覆盖{宽度:100%;高度:100%;背景:# CCC;位置:绝对;左:0;最高:0;不透明度:0;Z指数:1;显示:无;}
# closeconfirm {宽80px;高度:20px;线高度:20px;背景:# CCC;边界半径:5px;显示:块;文字装饰:无;颜色:# 000;文本对齐:中心;位置:绝对的;文本对齐:中心;}。
# trueconfirm {宽80px;高度:20px;线高度:20px;背景:# CCC;边界半径:5px;显示:块;文字装饰:无;颜色:# 000;文本对齐:中心;位置:绝对;底:10px;右:100px;}。
# confirmcon {文本对齐:中心;颜色:# CCC;身高:40px;线高度:40px;}
js文件confirmpop.js
代码如下:
复制代码代码如下所示:
功能confirmpop(delobj,confirmmain,叠加,binktitle,closeconfirm,trueconfirm){
这odelobj = document.getelementbyid(delobj);
这odiv = document.getelementbyid(confirmmain);
这ooverlay = document.getelementbyid(覆盖);
这otitle = document.getelementbyid(binktitle);
这ocloseconfirm = document.getelementbyid(closeconfirm);
这otrueconfirm = document.getelementbyid(trueconfirm);
这oconstart = 0;
这oconitarget = 0;
This.init();
}
confirmpop。原型= {
init:函数(){
这个oconstart = parseInt(((文档。文档元素}。自己的本。odiv。offsetheight) / 2-100);
这个oconitarget = parseInt(((文档。文档元素}。自己的本。odiv。offsetheight) / 2-70);
这个odiv。风格。=这oconstart + 'px;
文件标题=这。oconstart +,+ this.oconitarget;
无功_this =这;
这个odelobj。onclick=函数(){
_this.confirmshow();
}
这个ooverlay。onclick=函数(){
_this.titlebink();
}
这个ocloseconfirm。onclick=这。otrueconfirm。onclick=函数(){
_this.confirmhide();
}
},
confirmshow:函数(){
这个ooverlay。风格显示=阻止;
这个odiv。风格显示=阻止;
strivemove(this.ooverlay,{不透明度:30 });
strivemove(this.odiv,{顶:this.oconitarget,不透明度:100 })
},
titlebink:函数(){
无功_this =这;
无功ilighttimer = null;
var I=0;
ilighttimer = setInterval(){()函数(
如果(i % 2){
_this。otitle。风格。背景=# 60f;
其他{ }
_this。otitle。风格。背景=CCC#;
}
++;
如果(i = 5){
ClearInterval(ilighttimer);
}
},50)
},
confirmhide:函数(){
strivemove(this.ooverlay,{不透明度:0 });
这个ooverlay。风格显示=不关;
strivemove(this.odiv,{顶:this.oconstart,不透明度:0 });
}
}
功能strivemove(obj,JSON,FN){ clearInterval(obj。itimer);obj。itimer = setInterval(功能)({ var bstop = true;为(JSON { var长= 0(如果);var属性attr = = 'opacity{长= math.round(parseFloat(getstyle(obj)attr));}否则{长= parseInt(* 100)getstyle(obj,ATTR);} var迈跃=(JSON {属性} -长)/ 8);迈跃=迈跃> 0math.ceil(迈跃):Math.floor(迈跃);如果(attr = = 'opacity){ obj。风格。过滤= 'alpha(透明度:+(长+迈跃)+);对象的风格。不透明度=(长+迈跃) / 100;}否则{ obj。风格{属性} =长+迈跃+ 'px;}如果(长!= = JSON {属性}){ bstop =假;} }如果(bstop){ clearInterval(obj。itimer);如果(FN)({ FN)
使用方法
1。介绍文件
复制代码代码如下所示:
2。调用方法
复制代码代码如下所示:
窗口。onload =窗口。onresize =函数(){
新的confirmpop('btn ','div1 ','overlay,标题,'closeconfirm ','trueconfirm);
}
三.为工作做准备
复制代码代码如下所示:
您确定要删除该操作吗
确定
取消
此代码是为自己提供空间的div代码。可以在框中的标记中填入已删除的地址。单击确定后,跳转到删除页面方法。
这段代码可以放在任何位置。没有空格。作者非常尖锐。
4。熔断器、触发器
复制代码代码如下所示:
删除图标添加到ID =按钮
如果您想修改样式,您可以在CSS中修改它并调整它。
Summary: This JS deletion is a bit more beautiful than the browser's own pop-up.The author writes this effect with a short 3K JS.
PS,我刚拿到。
缺点,只能删除一个内容。因为所有的都是针对ID的,它们是简单化的。