Tip effect of deleting records 4-13

2019 Unicorn Enterprises heavily recruiting engineers Python standard >>>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>删除记录时的提示效果</title>
<script type="text/javascript" src="jquery-2.1.1.min.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: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:5px;padding-left:10px}
	.dialog .bottom{text-align:right;padding:10px 10px 10px 0px;background-color:#eee}
	.mask {width:100%;height:100%;background-color:#444;position:absolute;top:0px;left:0px;filter:alpha(opacity=30);display:none;z-index:100}
	.btn{border:#666 1px solid;padding:2px;width:65px;filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#ffffff,EndColorStr=#ECE9D8);}
</style>
<script type="text/javascript">
	$(function(){
		$("#Button1").click(function(){
			$(".mask").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();
			$(".mask").hide();
		})

		$("#Button3").click(function(){
			$(".dialog").hide();
			$(".mask").hide();
		})

		$("#Button2").click(function(){
			$(".dialog").hide();
			$(".mask").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="mask"></div>
	<div class="dialog">
		<div class="title">
			<img src="../Images/008.gif" alt="点击可以关闭"/>删除时提示
		</div>
		<div class="content">
			<img src="../Images/009.gif" 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>
Reproduced in: https: //my.oschina.net/u/2552902/blog/543934
Tip effect of deleting records 4-13

Guess you like
