首頁 > web前端 > js教程 > js確認刪除對話框效果的範例程式碼_javascript技巧

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

WBOY
發布: 2016-05-16 16:59:12
原創
990 人瀏覽過

效果如下:



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で変更して調整できます。


欠点: 削除できるコンテンツは 1 つだけです。すべてIDベースなので統一されています。
相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
最新問題
熱門推薦
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板