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 对象与DOM对象之两者相互间的转换
Apr 27 Javascript
轻松学习jQuery插件EasyUI EasyUI创建树形菜单
Nov 30 Javascript
Node.js连接postgreSQL并进行数据操作
Dec 18 Javascript
无阻塞加载js,防止因js加载不了影响页面显示的问题
Dec 18 Javascript
关于AngularJs数据的本地存储详解
Jan 20 Javascript
Bootstrap中data-target 到底是什么
Feb 14 Javascript
Bootstrap模态框案例解析
Mar 05 Javascript
利用JS对iframe父子(内外)页面进行操作的方法教程
Jun 15 Javascript
Node.js+Express+MySql实现用户登录注册功能
Jul 10 Javascript
深入浅出es6模板字符串
Aug 26 Javascript
Vue render渲染时间戳转时间,时间转时间戳及渲染进度条效果
Jul 27 Javascript
Angular8路由守卫原理和使用方法
Aug 29 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中PDO解决中文乱码问题的一些补充
2010/09/06 PHP
Zend Studio去除编辑器的语法警告设置方法
2012/10/24 PHP
简单了解PHP编程中数组的指针的使用
2015/11/30 PHP
PHP打印输出函数汇总
2016/08/28 PHP
Laravel如何实现自动加载类
2019/10/14 PHP
JS在textarea光标处插入文本的小例子
2013/03/22 Javascript
JS和函数式语言的三特性
2014/03/05 Javascript
js调试工具console.log()方法查看js代码的执行情况
2014/08/08 Javascript
JQuery 在文档中查找指定name的元素并移除的实现方法
2016/05/19 Javascript
JavaScript数组的定义及数字操作技巧
2016/06/06 Javascript
AngularJs  Creating Services详解及示例代码
2016/09/02 Javascript
详解jquery validate实现表单验证 (正则表达式)
2017/01/18 Javascript
Bootstrap3多级下拉菜单
2017/02/24 Javascript
微信小程序实现带缩略图轮播效果
2018/11/04 Javascript
JS实现集合的交集、补集、差集、去重运算示例【ES5与ES6写法】
2019/02/18 Javascript
仿vue-cli搭建属于自己的脚手架的方法步骤
2019/04/17 Javascript
微信小程序tab切换可滑动切换导航栏跟随滚动实现代码
2019/09/04 Javascript
vue element upload组件 file-list的动态绑定实现
2019/10/11 Javascript
js实现盒子移动动画效果
2020/08/09 Javascript
详解Vue中的watch和computed
2020/11/09 Javascript
[02:39]DOTA2国际邀请赛助威团西雅图第一天
2013/08/08 DOTA
疯狂上涨的Python 开发者应从2.x还是3.x着手?
2017/11/16 Python
django中的setting最佳配置小结
2017/11/21 Python
python梯度下降法的简单示例
2018/08/31 Python
Python assert语句的简单使用示例
2019/07/28 Python
详解python常用命令行选项与环境变量
2020/02/20 Python
Python unittest框架操作实例解析
2020/04/13 Python
关于HTML5 Placeholder新标签低版本浏览器下不兼容的问题分析及解决办法
2016/01/27 HTML / CSS
野兽派官方旗舰店:THE BEAST 野兽派
2016/08/05 全球购物
乌克兰设计师和品牌的服装:Love&Live
2020/04/14 全球购物
应届生人事助理求职信
2013/11/09 职场文书
优秀实习自我鉴定
2013/12/04 职场文书
产品销售员岗位职责
2013/12/18 职场文书
营销部内勤岗位职责
2014/04/30 职场文书
厉行勤俭节约倡议书
2014/05/16 职场文书
中学教师师德师风演讲稿
2014/08/22 职场文书