jQuery遮罩效果弹出层效果

<br><br>
<center><input type="button" id="viewdetailsproductinfo" value="点击弹出层"></center>
<div class="overfloat" id="poplayer">
  <div class="guize_html"> <span class="guize_html_nei">
    <h1>遮罩效果弹出层</h1>
    <p>jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库（或JavaScript框架）。jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。</p>
    </span>
    <div id="close" class="btn"> 确定 </div>
  </div>
</div>

.guize_html {
	position:fixed;
	top:25%;
	left:50%;
	margin-top:-80px;
	margin-left:-300px;
	width:660px;
	height:auto;
	border-radius:4px;
	background-color:#fff;
	color:#000;
	text-align:center;
	font-size:14px
}
.guize_html p {
	padding:0 10px;
	text-align:left;
	text-indent:2em
}
.btn {
	display:block;
	margin:30px auto;
	width:240px;
	height:40px;
	border-radius:4px;
	background-color:#ff6434;
	color:#fff;
	text-align:center;
	line-height:40px;
	cursor:pointer
}
.overfloat {
	position:fixed;
	line-height:25px;
	top:0;
	left:0;
	z-index:9;
	display:none;
	width:100%;
	height:100%;
	background-color:rgba(1,1,1,.5)
}

$('#viewdetailsproductinfo').click(function() {
    $("#poplayer").show();
});
$('#close').click(function() {
    $("#poplayer").hide();
});