样式
复制代码代码如下:
<style type="text/css">
тело {размер шрифта: 13 пикселей}
.divShow{line-height:32px;height:32px;background-color:#eee;width:280px;padding-left:10px}
.divShow span{padding-left:50px}
.dialog{width:360px;border:solid 5px #666;position:absolute;display:none;z-index:101}
.dialog .title{background-color:#fbaf15;padding:10px;color:#fff;font-weight:bold}
.dialog .title img{float:right}
.dialog .content{background-color:#fff;padding:25px;height:60px}
.dialog .content img{float:left}
.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 {ширина:100%;высота:100%; цвет фона:#000;позиция:абсолютная;
сверху: 0 пикселей; слева: 0 пикселей; фильтр: альфа (непрозрачность = 30); дисплей: нет; z-индекс: 100}
.btn {border:#666 1px сплошной;padding:2px;ширина:65px;
filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#ffffff, EndColorStr=#ECE9D8);}
</стиль>
jquery
复制代码代码如下:
<тип сценария="текст/javascript">
$(функция() {
$("#Button1").click(function() { // 注册删除按钮点击事件
$(".mask").show(); //显示背景色
показатьДиалог(); //设置提示对话框的Top与Left
$(".dialog").show(); //显示提示对话框
})
/*
*根据当前页面与滚动条位置,设置提示对话框的Вверху слева
*/
функция showDialog() {
вар objW = $(окно); //当前窗口
вар objC = $(".dialog"); //对话框
вар brsW = objW.width();
вар brsH = objW.height();
вар sclL = objW.scrollLeft();
вар sclT = objW.scrollTop();
вар curW = objC.width();
вар curH = objC.height();
//计算对话框居中时的左边距
var left = sclL + (brsW - curW)/2;
//计算对话框居中时的上边距
var top = sclT + (brsH - curH)/2;
//设置对话框在页面中的位置
objC.css({ "left": left, "top": top });
}
$(window).resize(function() {//页面窗口大小改变事件
if (!$(".dialog").is(":visible")) {
возвращаться;
}
показатьДиалог(); //设置提示对话框的Top与Left
});
$(".title img").click(function() { // 注册关闭图片点击事件
$(".dialog").hide();
$(".маска").hide();
})
$("#Button3").click(function() {//
$(".dialog").hide();
$(".маска").hide();
})
$("#Button2").click(function() {//注册确定按钮点击事件
$(".dialog").hide();
$(".маска").hide();
if ($("input:checked").length != 0) {//如果选择了删除行
$(".divShow").remove(); //删除某行数据
}
})
})
</скрипт>
HTML
复制代码代码如下:
<дел>
<input id="Checkbox1" type="checkbox" />
<a href="#">Нажмите здесь, чтобы удалить</a>
<диапазон>
<input id="Button1" type="button" value="删除" />
</span>
</div>
<div></div>
<дел>
<дел>
<img src="Images/close.gif" />删除时提示
</div>
<дел>
<img src="Images/delete.jpg" /><span>Нажмите здесь, чтобы сохранить изображение</span>
</div>
<дел>
<input id="Button2" type="button" value="确定"/>
<input id="Button3" type="button" value="取消"/>
</div>
</div>