風格
複製程式碼如下：
<樣式類型=“文字/css”>
正文{字體大小：13px}
.divShow{行高：32px；高度：32px；背景顏色：#eee；寬度：280px；左內邊距：10px}
.divShow span{padding-left:50px}
.dialog{寬度：360px；邊框：實心5px #666；位置：絕對；顯示：無；z-index：101}
.dialog .title{背景顏色:#fbaf15;填色:10px;顏色:#fff;字型粗細:粗體}
.dialog .title img{float:right}
.dialog .content{背景顏色：#fff;填滿：25px;高度：60px}
.dialog .content img{float:left}
.dialog .content span{float:left;padding-top:10px;padding-left:10px}
.dialog .bottom{文字對齊：右；填滿：10px 10px 10px 0px；背景顏色：#eee}
.mask {寬度：100％；高度：100％；背景顏色：#000；位置：絕對；
頂部：0px；左側：0px；過濾器：alpha（不透明度=30）；顯示：無；z-index：100}
.btn {邊框：#666 1px 實心；填充：2px；寬度：65px；
過濾器：progid：DXImageTransform.Microsoft.Gradient（GradientType = 0，StartColorStr =＃ffffff，EndColorStr =＃ECE9D8）;}
</風格>
jQuery
複製程式碼如下：
<腳本類型=“文字/javascript”>
$(函數() {
$("#Button1").click(function() { //註冊刪除按鈕點選事件
$(".mask").show(); // 顯示背景色
顯示對話框(); //設定提示對話框的Top與Left
$(".dialog").show(); // 提示顯示對話框
})
/*
*根據目前頁面與捲軸位置，設定提示對話框的Top與Left
*/
函數顯示對話框（）{
var objW = $(窗口); //目前視窗
var objC = $(".dialog"); //對話框
var brsW = objW.width();
var brsH = objW.height();
var sclL = objW.scrollLeft();
var sclT = objW.scrollTop();
var curW = objC.width();
var curH = objC.height();
//計算對話方塊居中時的左距
var 左 = sclL + (brsW - curW) / 2;
//計算對話方塊居中時的上邊距
var top = sclT + (brsH - curH) / 2;
//設定對話框在頁面中的位置
objC.css({ "left": 左, "top": 頂部 });
}
$(window).resize(function() {//頁面視窗大小改變事件
if (!$(".dialog").is(":visible")) {
返回;
}
顯示對話框（）； //設定提示對話框的Top與Left
});
$(".title img").click(function() { //註冊關閉圖片點擊事件
$(".dialog").hide();
$(".mask").hide();
})
$("#Button3").click(function() {//註冊取消按鈕點選事件
$(".dialog").hide();
$(".mask").hide();
})
$("#Button2").click(function() {//註冊確定按鈕點選事件
$(".dialog").hide();
$(".mask").hide();
if ($("input:checked").length != 0) {//如果選擇了刪除行
$(".divShow").remove(); //刪除某行數據
}
})
})
</腳本>
html
複製程式碼如下：
<div>
<input id="Checkbox1" type="checkbox" />
<a href="#">這是一筆可刪除的記錄</a>
<跨度>
<input id="Button1" type="button" value="刪除" />
</span>
</div>
<div></div>
<div>
<div>
<img src="Images/close.gif" />刪除時提示
</div>
<div>
<img src="Images/delete.jpg" /><span>您真的要刪除該筆記錄嗎？
</div>
<div>
<input id="Button2" type="button" value="確定"/>
<input id="Button3" type="button" value="取消"/>
</div>
</div>