jquery 居中弹框

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <title> pop window </title>
  <style type="text/css">
	.popup {
	    display: none;
	    background: #333;
	    padding: 10px;
	    border: 2px solid #ddd;
	    position: fixed;
	    top: 50%;
	    left: 50%;
	    width:200px;
	    height:100px;
	    z-index: 99999;
	}
  </style>
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
 </head>

 <body style="width:798px;height:1900px;border:1px solid red;margin:auto">
 <button id="btn" style="float: left;width: 50px;margin-top: 500px;">click</button>
	<div class='popup'>11</div>
 </body>
 <script type="text/javascript" >
	$('#btn').click(function() {
		$(".popup").fadeIn(300);
		var popMargTop = $(".popup").height() / 2; 
		var popMargLeft = $(".popup").width() / 2; 
		$(".popup").css({ 
			'margin-top' : -popMargTop,
			'margin-left' : -popMargLeft
		});
		return false;
	});
	
	$(".popup").click(function(){
		$(this).fadeOut(300);
		return false;
	});
 </script>
</html>

你可能感兴趣的:(jqeury居中弹框)