js確認(rèn)刪除對(duì)話框效果的示例代碼

更新時(shí)間：2014年02月20日 09:20:49 作者：

本篇文章主要是對(duì)js確認(rèn)刪除對(duì)話框效果的示例代碼進(jìn)行了介紹，需要的朋友可以過來參考下，希望對(duì)大家有所幫助

效果如下：

css文件delcss.css

代碼如下：

復(fù)制代碼代碼如下:

*{ 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

代碼如下：

復(fù)制代碼代碼如下:

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.引入文件

復(fù)制代碼代碼如下:

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

2.調(diào)用方法

復(fù)制代碼代碼如下:

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

3.做好準(zhǔn)備工作

復(fù)制代碼代碼如下:

<div id="div1">
    <h3 id="title"></h3>
    <div id="confirmCon">
        您確定要進(jìn)行刪除操作么？
    </div>
    <a href="###" id="trueConfirm">確定</a>
    <a href="###" id="closeConfirm">取消</a>
</div>
<div id="overlay"></div>

這段代碼是提供空間的，自己寫的div代碼。其中確定框中的a標(biāo)簽中，可以把刪除的地址填入其中。點(diǎn)擊確定時(shí)，就跳轉(zhuǎn)到刪除的頁(yè)面方法中了。

這段代碼可以放入任何位置。不占空間。作者很犀利。

4.導(dǎo)火線，觸發(fā)器

復(fù)制代碼代碼如下:

將刪除圖標(biāo)加上id="btn"，這樣就會(huì)觸發(fā)刪除效果了。

如果想修改樣式，可以到css中進(jìn)行修改，調(diào)整。

小結(jié)：這樣的js刪除就比瀏覽器自帶的彈出框美觀一些了。作者用短短3k的js就寫出這種效果，真心厲害。

ps，我只是拿來的。

缺點(diǎn)，只能針對(duì)一個(gè)內(nèi)容，進(jìn)行刪除。因?yàn)樗械亩际轻槍?duì)id的，單一化了。

您可能感興趣的文章: