样式
复代码代码如下:
<스타일 유형="텍스트/css">
본문{글꼴 크기:13px}
.divShow{line-height:32px;height:32px; background-color:#eee;width:280px;padding-left:10px}
.div표시 범위{padding-left:50px}
.dialog{width:360px;border:solid 5px #666;position:absolute;display:none;z-index:101}
.dialog .title{배경-색상:#fbaf15;패딩:10px;색상:#fff;글꼴-가중치:bold}
.dialog .title img{float:right}
.dialog .content{배경색:#fff;패딩:25px;높이:60px}
.dialog .content img{float:왼쪽}
.dialog .content 범위{float:left;padding-top:10px;padding-left:10px}
.dialog .bottom{text-align:right;padding:10px 10px 10px 0px;배경색:#eee}
.mask {너비:100%;높이:100%; 배경색:#000;위치:절대;
상단:0px;왼쪽:0px;필터:알파(불투명도=30);디스플레이:없음;z-index:100}
.btn {테두리:#666 1px 솔리드;패딩:2px;너비:65px;
필터:progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#ffffff, EndColorStr=#ECE9D8);}
</style>
제이쿼리
复代码代码如下:
<스크립트 유형="텍스트/자바스크립트">
$(함수() {
$("#Button1").click(function() { //注册删除按钮点击事件
$(".mask").show(); //显示背景color
showDialog(); //设置提示对话框的Top与Left
$(".dialog").show(); //显示提示对话框
})
/*
*根据当前页面与滚动条位置，设置提示对话框的Top与Left
*/
함수 showDialog() {
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({ "왼쪽": 왼쪽, "위쪽": 위쪽 });
}
$(window).resize(function() {//页면窗口大小改变事件
if (!$(".dialog").is(":visible")) {
반품;
}
showDialog(); //设置提示对话框的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(); //删除某行数据
}
})
})
</script>
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>