js确认删除对话框效果的示例代码


Posted in Javascript onFebruary 20, 2014

效果如下:

js确认删除对话框效果的示例代码

css文件delcss.css

代码如下:

*{ margin:0; padding:0;}
#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;}
#div1 h3{ height:20px; background:#60f;}
#overlay{ width:100%; height:100%; background:#ccc; position:absolute; left:0; top:0; opacity:0; z-index:1; display:none;}
#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{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{ text-align:center; color:#ccc; height:40px; line-height:40px;}

js文件confirmPop.js

代码如下:

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.prototype={
    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:function(){
        this.oOverlay.style.display='block';
        this.oDiv.style.display='block';
        striveMove(this.oOverlay,{ opacity:30});
        striveMove(this.oDiv,{top:this.oConItarget, opacity:100})
    },
    titleBink:function(){
        var _this=this;
        var iLightTimer=null;
        var i=0;
        iLightTimer=setInterval(function(){
            if(i%2){
                _this.oTitle.style.background='#60f';
            }else{
                _this.oTitle.style.background='#ccc';    
            }
            i++;
            if(i>5){
                clearInterval(iLightTimer);
            }
        },50)    
    },
    confirmHide:function(){
        striveMove(this.oOverlay,{opacity:0});
        this.oOverlay.style.display='none';
        striveMove(this.oDiv,{top:this.oConStart, opacity:0});    
    }
}
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)}function  getStyle(obj,attr){return  obj.currentStyle?obj.currentStyle[attr]:getComputedStyle(obj,false)[attr];}

使用方法

1.引入文件

<link rel="stylesheet" type="text/css" href="delcss.css"/>
<script src="confirmPop.js"></script>

2.调用方法
<script>
window.onload=window.onresize=function(){
    new ConfirmPop('btn','div1','overlay','title','closeConfirm','trueConfirm');
}
</script>

3.做好准备工作
<div id="div1">
    <h3 id="title"></h3>
    <div id="confirmCon">
        您确定要进行删除操作么?
    </div>
    <a href="###" id="trueConfirm">确定</a>
    <a href="###" id="closeConfirm">取消</a>
</div>
<div id="overlay"></div>

这段代码是提供空间的,自己写的div代码。其中确定框中的a标签中,可以把删除的地址填入其中。点击确定时,就跳转到删除的页面方法中了。

这段代码可以放入任何位置。不占空间。作者很犀利。

4.导火线,触发器

<a  id="btn" ><img src="/images/default/right/ico_del.gif" /></a>

将删除图标加上id="btn",这样就会触发删除效果了。

如果想修改样式,可以到css中进行修改,调整。

小结:这样的js删除就比浏览器自带的弹出框美观一些了。作者用短短3k的js就写出这种效果,真心厉害。

ps,我只是拿来的。

缺点,只能针对一个内容,进行删除。因为所有的都是针对id的,单一化了。

Javascript 相关文章推荐
基于jQuery的可以控制左右滚动及自动滚动效果的代码
Jul 25 Javascript
jQuery timers计时器简单应用说明
Oct 28 Javascript
javascript中的self和this用法小结
Feb 08 Javascript
jQuery中hide()方法用法实例
Dec 24 Javascript
JS中多种方式创建对象详解
Mar 22 Javascript
超全面的javascript中变量命名规则
Feb 09 Javascript
Bootstrap modal 多弹窗之叠加关闭阴影遮罩问题的解决方法
Feb 27 Javascript
js指定日期增加指定月份的实现方法
Dec 19 Javascript
微信小程序左右滚动公告栏效果代码实例
Sep 16 Javascript
Vue过滤器,生命周期函数和vue-resource简单介绍
Jan 12 Vue.js
使用Vue3+Vant组件实现App搜索历史记录功能(示例代码)
Jun 09 Vue.js
Javascript的promise,async和await的区别详解
Mar 24 Javascript
多种方法实现load加载完成后把图片一次性显示出来
Feb 19 #Javascript
jquery无刷新验证邮箱地址实现实例
Feb 19 #Javascript
js左右弹性滚动对联广告代码分享
Feb 19 #Javascript
javascript异步编程的4种方法
Feb 19 #Javascript
点击显示指定元素隐藏其他同辈元素的方法
Feb 19 #Javascript
javascript函数重载解决方案分享
Feb 19 #Javascript
一个CSS+jQuery实现的放大缩小动画效果
Feb 19 #Javascript
You might like
PHP抓取、分析国内视频网站的视频信息工具类
2014/04/02 PHP
destoon常用的安全设置概述
2014/06/21 PHP
jQuery :nth-child前有无空格的区别分析
2011/07/11 Javascript
js鼠标点击图片切换效果实现代码
2015/11/19 Javascript
JavaScript 监控微信浏览器且自带返回按钮时间
2016/11/27 Javascript
JavaScript实现为事件句柄绑定监听函数的方法分析
2017/11/14 Javascript
浅谈webpack-dev-server的配置和使用
2018/05/17 Javascript
微信小程序url传参写变量的方法
2018/08/09 Javascript
基于JavaScript canvas绘制贝塞尔曲线
2018/12/25 Javascript
浅谈发布订阅模式与观察者模式
2019/04/09 Javascript
Vue使用watch监听一个对象中的属性的实现方法
2019/05/10 Javascript
vscode中eslint插件的配置(prettier配置无效)
2019/09/10 Javascript
vue实现评价星星功能
2020/06/30 Javascript
[04:48]DOTA2亚洲邀请赛林书豪为VGJ加油
2017/04/01 DOTA
[01:10:58]KG vs TNC 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/16 DOTA
Python中用pycurl监控http响应时间脚本分享
2015/02/02 Python
python threading模块操作多线程介绍
2015/04/08 Python
python计算方程式根的方法
2015/05/07 Python
python3中str(字符串)的使用教程
2017/03/23 Python
Python实现的选择排序算法示例
2017/11/29 Python
Python装饰器的执行过程实例分析
2018/06/04 Python
用Python分析3天破10亿的《我不是药神》到底神在哪?
2018/07/12 Python
详解python中Numpy的属性与创建矩阵
2018/09/10 Python
python按比例随机切分数据的实现
2019/07/11 Python
Python Numpy 自然数填充数组的实现
2019/11/28 Python
Python通过VGG16模型实现图像风格转换操作详解
2020/01/16 Python
Python3 搭建Qt5 环境的方法示例
2020/07/16 Python
python通过cython加密代码
2020/12/11 Python
如何用css3实现switch组件开关的方法
2018/02/09 HTML / CSS
名人珠宝设计师:Melinda Maria Jewelry
2019/03/06 全球购物
俄语地区最大的中国商品在线购物网站之一:Umka Mall
2019/11/03 全球购物
夜大毕业自我鉴定
2013/10/11 职场文书
不假外出检讨书
2014/01/27 职场文书
党的群众路线教育实践活动批评与自我批评范文
2014/10/16 职场文书
入党积极分子党小组意见
2015/06/02 职场文书
发工资啦!教你用Python实现邮箱自动群发工资条
2021/05/10 Python