Js to confirm the removal of dialog box effect of the sample code

The effect is as follows:

< img Alt = "" border = 0 SRC =" / / files.jb51.net/file_images/article/201402/20140220091803.png ">

The CSS file delcss. CSS

The code is as follows:

*{ 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 file confirmPop. Js

The code is as follows:

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];}

Method of use

1. Import files

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

2. Call the method

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

3. Do your homework

<div id="div1">
    <h3 id="title"></h3>
    <div id="confirmCon">
         Are you sure you want to delete? 
    </div>
    <a href="###" id="trueConfirm"> determine </a>
    <a href="###" id="closeConfirm"> cancel </a>
</div>
<div id="overlay"></div>

This code is provided space, write their own div code. In the a label in the confirmation box, you can fill in the deleted address. When you click ok, you jump to the deleted page method.

This code can be put anywhere. It doesn't take up space. The author is very sharp.

4. Fuse, trigger

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

Add id=" BTN "to the delete icon to trigger the delete effect.

If you want to change the style, you can go to CSS to make changes and adjustments.

Summary: This js delete than the browser's own pop-up box a little more beautiful. The author USES short 3k js to write this effect, really fierce.

Ps, I just brought it.

Disadvantage, only for a content, to delete. Because everything is for id, it's simplified.