删除记录时的提示效果
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>删除记录时的提示效果</title>
<script src="jquery-2.1.0.js"></script>
<style type="text/css">
body {
font-size:13px;
}
.divShow {
line-height:32px;
height:32px;
background-color:#eee;
width:280px;
padding-left:10px;
}
.divShow span {
padding-left:50px;
}
.dialog {
width:360px;
border:5px solid #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;
}
.mark {
width: 100%;
height: 100%;
background-color: #000;
position: absolute;
top: 0px;
left: 0px;
filter:alpha(opacity=30);
display:none;
z-index:100;
}
.btn {
border:1px solid #666;
padding:2px;
width:65px;
filter: progid:DxImageTransForm.Microsoft.Oradient(GradientType=0,StartColorStr=#fffff,EndColorStr=#ECE9D8);
}
</style>
<script type="text/javascript">
$(function () {
$("#Button1").click(function () {
$(".mark").show();
showDialog();
$(".dialog").show();
})
function showDialog() {
var objW = $(window);
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 left = sclL + (brsW - curW) / 2;
var top = sclT + (brsH - curH) / 2;
objC.css({ "left": left, "top": top });
}
$(window).resize(function () {
if (!$(".dialog").is(":visible"))
{
return;
}
showDialog();
})
$(".title img").click(function () {
$(".dialog").hide();
$(".mark").hide();
})
$("#Button3").click(function () {
$(".dialog").hide();
$(".mark").hide();
})
$("#Button2").click(function () {
$(".dialog").hide();
$(".mark").hide();
if ($("input:checked").length != 0)
{
$(".divShow").remove();
}
})
})
</script>
</head>
<body>
<div class="divShow">
<input id="Checkbox1" type="checkbox" />
<a href="#">这是一条可以删除的记录</a>
<span>
<input id="Button1" type="button" value="删除" class="btn" />
</span>
</div>
<div class="mark"></div>
<div class="dialog">
<div class="title">
<img src="19.jpg" alt="点击可以关闭" />删除时提示
</div>
<div class="content">
<img src="15.jpg" alt="" />
<span>你真的要删除这条记录</span>
</div>
<div class="bottom">
<input id="Button2" type="button" value="确定" class="btn" />
<input id="Button3" type="button" value="取消" class="btn" />
</div>
</div>
</body>
</html>
仅是一个简单的效果
