样式
复制代码代码如下:
<style type="texto/css">
corpo{tamanho da fonte: 13px}
.divShow{altura da linha:32px;altura:32px;cor de fundo:#eee;largura:280px;preenchimento esquerdo:10px}
.divShow span{padding-left:50px}
.dialog{largura:360px;borda:sólido 5px #666;posição:absoluto;exibição:nenhum;índice z:101}
.dialog .title{cor de fundo:#fbaf15;padding:10px;cor:#fff;peso da fonte:bold}
.dialog .title img{float:right}
.dialog .content{cor de fundo:#fff;padding:25px;altura:60px}
.dialog .content img{float:esquerda}
.dialog .content span{float:left;padding-top:10px;padding-left:10px}
.dialog .bottom{text-align:right;padding:10px 10px 10px 0px;cor de fundo:#eee}
.mask {largura:100%;altura:100%; cor de fundo:#000;posição:absoluta;
topo:0px;esquerda:0px;filtro:alfa(opacidade=30);display:none;z-index:100}
.btn {borda:#666 1px sólido;preenchimento:2px;largura:65px;
filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#ffffff, EndColorStr=#ECE9D8);}
</estilo>
jquery
复制代码代码如下:
<script type="texto/javascript">
$(função(){
$("#Button1").click(function() { //注册删除按钮点击事件
$(".máscara").show(); //显示背景色
mostrarDialog(); //设置提示对话框的Topo à esquerda
$(".dialog").show(); //显示提示对话框
})
/*
*根据当前页面与滚动条位置,设置提示对话框的Topo à esquerda
*/
função mostrarDialog() {
var objW = $(janela); //当前窗口
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 esquerda = sclL + (brsW - curW) / 2;
//计算对话框居中时的上边距
var topo = sclT + (brsH - curH) / 2;
//设置对话框在页面中的位置
objC.css({ "esquerda": esquerda, "topo": topo });
}
$(window).resize(function() {//页面窗口大小改变事件
if (!$(".dialog").is(":visível")) {
retornar;
}
mostrarDialog(); //设置提示对话框的Topo à esquerda
});
$(".title img").click(function() { //注册关闭图片点击事件
$(".dialog").hide();
$(".máscara").ocultar();
})
$("#Button3").click(function() {//注册取消按钮点击事件
$(".dialog").hide();
$(".máscara").ocultar();
})
$("#Button2").click(function() {//注册确定按钮点击事件
$(".dialog").hide();
$(".máscara").ocultar();
if ($("input:checked").length != 0) {//如果选择了删除行
$(".divShow").remove(); //删除某行数据
}
})
})
</script>
HTML
复制代码代码如下:
<div>
<input id="Checkbox1" type="checkbox" />
<a href="#">这是一条可删除的记录</a>
<span>
<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>