js確認刪除對話框效果的範例程式碼_javascript技巧

效果如下：

css檔delcss.css

程式碼如下：

複製程式碼程式碼如下：

>{ margin0*{ margin0;填充：0;}
#div1{ 寬度：300px;高度：100px；邊框半徑：10px；背景：#f60；框陰影：5px 5px 10px #ccc；位置：絕對；左：50%；距左邊： -150px； z 索引：2；不透明度：0；過濾器：alpha（不透明度：0）；顯示：無；}
#div1 h3{ 高度：20px;背景：#60f;}
# overlay{ 寬度：100%;高度：100%；背景：#ccc；位置：絕對；左：0；頂部：0；不透明度：0； z 索引：1；顯示：無;}
#closeConfirm{寬度：80px;高度：20px；行高：20px；背景：#ccc；邊框半徑：5px；顯示：區塊；文字裝飾：無；顏色：#000；文字對齊：居中；位置：絕對；底部：10px；右：10px;}
#trueConfirm{寬度：80px;高度：20px；行高：20px；背景：#ccc；邊框半徑：5px；顯示：區塊；文字裝飾：無；顏色：#000；文字對齊：居中；位置：絕對；底部：10px；右：100px;}
#confirmCon{ text-align:center;顏色：#ccc；高度：40px；行高：40px;}

js檔confirmPop.js

程式碼如下：

複製程式碼程式碼如下：

函數ConfirmPop(delObj,confirmMain,overlay,binkTitle,closeConfirm,trueConfirm){
    this.oDelObj=document.getElementById(delObjget);
    this.oOverlay=document.getElementById(overlay);
    this.oTitle=document.getElementById(binkTitle); oTrueConfirm=document .getElementById(trueConfirm);
    this.oConStart=0;
    this.oConItarget=0;
    this.. function(){
        this.oConStart=parseInt((document.documentElement.clientHeight-this.oDiv.offsetHeight)/2-100)；        this.oDiv.style.top=this.oConStart 'px';
      var _this =this;
        this.oDelObj.onclick=function(){
           this.oOverlay.onclick=function(){
            _this.titleB墨水（ ) ;
        }
        this.oCloseConfirm.onclick=this.oTrueConfirm.onclick=function(){
    },
    確認顯示： function(){
        this.oOverlay.style.display='block';
        this.oDiv.style.display='block';        StretchMove(this.oDiv,{top:this.oConItarget, opacity:100})
    },
          var iLightTimer=null ;
        var i=0;
        iLightTimer=setInterval(function(){
          _this.oTitle.style.background='#60f';
            } else{
                _this.oTitle.style.background='#ccc';                if(i>5){
               🎜>        },50)   
    },
    確認隱藏:函數(  this.oOverlay.style.display=' none';
       爭取移動(this.oDiv,{top:this.oConStart, opacity :0});   
    }

}
函數stretchMove(obj,json,fn){clearInterval(obj.iTimer);obj.iTimer=setInterval(function(){var bStop=trueforfor(var attr=true; ) ）在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=='不透明度') {對象。 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)}函數getStyle(obj,attr ) ) ){return obj.currentStyle?obj.currentStyle[attr]:getCompulatedStyle(obj,false)[attr];}


使用方法

1. ファイルをインポートします

コードをコピーします コードは次のとおりです:

2 .Call メソッド

コードをコピー コードは次のとおりです:

;script>
window.onload=window.onresize=function(){
new confirmPop('btn','div1','overlay','title','closeconfirm','trueconfirm');
}

< /script>

3. コードをコピーします コードは次のとおりです:

削除してもよろしいですか?

OK
キャンセル

このコードはスペース、div です自分で書いたコード。確認ボックスのラベルに、削除したアドレスを入力できます。 「OK」をクリックすると、削除されたページのメソッドにジャンプします。

このコードはどこにでも配置できます。場所をとりません。著者はとても鋭いです。

ID を使用して削除アイコンを追加します="btn "、これにより削除効果がトリガーされます。

スタイルを変更したい場合は、CSSで変更して調整できます。

概要: このような JS の削除は、ブラウザーに付属のポップアップ ボックスよりも美しいです。作者はたった 3k js を使ってこのエフェクトを作成しましたが、これは本当に素晴らしいことです。 追伸、今持ってきたところです。

欠点: 削除できるコンテンツは 1 つだけです。すべてIDベースなので統一されています。