样式
复制代码代码如下:
<tipo de estilo="texto/css">
cuerpo {tamaño de fuente: 13px}
.divShow{altura-línea:32px;altura:32px;color-fondo:#eee;ancho:280px;padding-left:10px}
.divMostrar intervalo{padding-left:50px}
.dialog{ancho:360px;borde:sólido 5px #666;posición:absoluta;pantalla:ninguna;índice z:101}
.dialog .title{color de fondo:#fbaf15;padding:10px;color:#fff;font-weight:bold}
.dialog .title img{float:derecha}
.dialog .content{color de fondo:#fff;padding:25px;height:60px}
.dialog .content img{float:izquierda}
.dialog .content span{float:left;padding-top:10px;padding-left:10px}
.dialog .bottom{text-align:right;padding:10px 10px 10px 0px;background-color:#eee}
.mask {ancho:100%;alto:100%; color de fondo:#000;posición:absoluta;
arriba:0px;izquierda:0px;filtro:alfa(opacidad=30);pantalla:ninguno;índice z:100}
.btn {borde:#666 1px sólido;relleno:2px;ancho:65px;
filtro:progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#ffffff, EndColorStr=#ECE9D8);}
</estilo>
jQuery
复制代码代码如下:
<tipo de script="texto/javascript">
$(función() {
$("#Button1").click(function() { //注册删除按钮点击事件
$(".máscara").mostrar(); //显示背景色
mostrar diálogo(); //设置提示对话框的Arriba与Izquierda
$(".dialog").mostrar(); //显示提示对话框
})
/*
*根据当前页面与滚动条位置，设置提示对话框的Top与Izquierda
*/
función mostrarDialog() {
var objW = $(ventana); //当前窗口
var objC = $(".diálogo"); //对话框
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 izquierda = sclL + (brsW - curW) / 2;
//计算对话框居中时的上边距
var superior = sclT + (brsH - curH) / 2;
//设置对话框在页面中的位置
objC.css({ "izquierda": izquierda, "arriba": arriba });
}
$(ventana).resize(function() {//页面窗口大小改变事件
si (!$(".dialog").is(":visible")) {
devolver;
}
mostrar diálogo(); //设置提示对话框的Arriba与Izquierda
});
$(".title img").click(function() { //注册关闭图片点击事件
$(".dialog").ocultar();
$(".máscara").ocultar();
})
$("#Button3").click(function() {//注册取消按钮点击事件
$(".dialog").ocultar();
$(".máscara").ocultar();
})
$("#Button2").click(function() {//注册确定按钮点击事件
$(".dialog").ocultar();
$(".máscara").ocultar();
if ($("input:checked").length != 0) {//如果选择了删除行
$(".divShow").remove(); //删除某行数据
}
})
})
</script>
HTML
复制代码代码如下:
<div>
<entrada id="Casilla de verificación1" tipo="casilla de verificación" />
<a href="#">这是一条可删除的记录</a>
<lapso>
<input id="Botón1" tipo="botón" valor="删除" />
</span>
</div>
<div></div>
<div>
<div>
<img src="Images/close.gif" />删除时提示
</div>
<div>
<img src="Images/delete.jpg" /><span>您真的要删除该条记录吗？</span>
</div>
<div>
<input id="Botón2" tipo="botón" valor="确定"/>
<input id="Botón3" tipo="botón" valor="取消"/>
</div>
</div>