风格
复制代码代码如下：
<样式类型=“文本/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>您真的要删除该条记录吗？</span>
</div>
<div>
<input id="Button2" type="button" value="确定"/>
<input id="Button3" type="button" value="取消"/>
</div>
</div>