効果は次のとおりです。
CSSファイルdelcss.css
コードは次のとおりです。
コードコピーは次のとおりです。
*{マージン：0;}
＃div1 {300px：＃f60; - インデックス：2;
＃div1 h3 {height：20px;}
＃width：100％;
#closeconfirm {80px：20px：位置：絶対的なもの：10px;}
#trueconfirm {80px：20px：位置：絶対的なもの：10px;}
#confirmcon {center：#ccc：40px;}
jsファイルconfismpop.js
コードは次のとおりです。
コードコピーは次のとおりです。
function cundilepop（delobj、cundilemain、overlay、binktitle、closeconfirm、trueconfirm）{
this.odelobj = document.getElementById（delobj）;
this.odiv = document.getElementById（confirmmain）;
this.OOverlay = document.getElementByID（オーバーレイ）;
this.otitle = document.getElementById（binktitle）;
this.ocloseconfirm = document.getElementbyId（closeconfirm）;
this.otrueconfirm = document.getElementById（trueconfirm）;
this.oconstart = 0;
this.oconitarget = 0;
this.init（）;
}
cundilepop.prototype = {
init：function（）{
this.oconstart = parseint（（document.documentelement.clientheight-this.odiv.offseTheigh）/2-100）;
this.oconitarget = parseint（（document.documentelement.clientheight-this.odiv.offseTheigh）/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';
}それ以外{
_this.otitle.style.background = '＃ccc';
}
i ++;
if（i> 5）{
ClearInterval（ilighttimer）;
}
}、50）
}、
confirmhide：function（）{
strivemove（this.ooverlay、{ofacity：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 == 'Ofacity'）{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 == 'ofacity'）{obj.style.filter = 'alpha（ofacity：'+（icur+ ispeed ）+'）'; obj.style.opacity =（icur+ispeed）/100;} else {obj.style [attr] = icur+'px';} if（icur！== json [attr]）{ bstop = false;}} if（bstop）{clearinterval（obj.itimer）; if（fn）{fn（）;}}}}}}}} function getStyle（obj、attr）{return obj.currentstyle？ob j。 currentStyle [attr]：getComputedStyle（obj、false）[attr];}
使用
1.ファイルを紹介します
コードコピーは次のとおりです。
<link rel = "styleSheet" type = "text/css" href = "delcss.css"/>
<スクリプトsrc = "cundilepop.js"> </script>
2。呼び出し方法
コードコピーは次のとおりです。
<スクリプト>
window.onload = window.onresize = function（）{
new ConsienPop（ 'btn'、 'div1'、 'overlay'、 'title'、 'closeconfirm'、 'trueconfirm'）;
}
</script>
3。準備してください
コードコピーは次のとおりです。
<div id = "div1">
<h3 id = "title"> </h3>
<div id = "Confismcon">
削除したいですか？
</div>
<a href = "###" id = "trueconfirm">確認</a>
<a href = "###" id = "closeconfirm">キャンセル</a>
</div>
<div id = "overlay"> </div>
このコードはスペースを提供し、独自のDIVコードを書き込みます。決定ボックスのAタグでは、削除されたアドレスを入力できます。 [OK]をクリックすると、削除されたページメソッドにジャンプします。
このコードはどこにでも配置できます。スペースを占有しません。著者は非常に鋭いです。
4。ヒューズ、トリガー
コードコピーは次のとおりです。
<a id = "btn"> <img src = "/images/default/right/ico_del.gif"/> </a>
削除アイコンにid = "btn"を追加します。これにより、削除効果がトリガーされます。
スタイルを変更する場合は、CSSにアクセスして変更および調整できます。
概要：このようなJS削除は、ブラウザに付属のポップアップボックスよりも美しいです。著者は、わずか3K JSを使用してこの効果を書きます。これは本当に驚くべきことです。
PS、私はそれを持ってきました。
短所：削除できるコンテンツは1つだけです。すべてがID指向であり、独身であるためです。