弹出层

http://www.51xuediannao.com/js/jquery/jquery_tanchu/
http://layer.layui.com/

<style type="text/css">
<!--
.pop-box {
	z-index: 9999; /*这个数值要足够大，才能够显示在最上层*/
	margin-bottom: 3px;
	display: none;
	position: absolute;
	background: #FFF;
	border: solid 1px #6e8bde;
}

.pop-box h4 {
	/* color: #FFF; */
	background-color: #3357BE;
    cursor: default;
    display: block;
    font-size: 14px;
    font-weight: bold;
    height: 18px;
    line-height: 18px;
    padding-bottom: 2px;
    padding-left: 8px;
    padding-top: 4px;
    text-align: center;
    color:#fff;
}


.pop-box-body {
	clear: both;
	margin: 4px;
	padding: 2px;
}
.pop-box-body p{
	line-height:35px;
	
}
/*button*/
.btn_submit_1 {
	-moz-box-shadow:inset 0px 1px 0px 0px #E5F7FE;
	-webkit-box-shadow:inset 0px 1px 0px 0px #E5F7FE;
	box-shadow:inset 0px 1px 0px 0px #E5F7FE;
	background:-webkit-gradient( linear, left top, left bottom, color-stop(0.1, #46C0F2), color-stop(1, #359CDE) );
	background:-moz-linear-gradient( center top, #46C0F2 10%, #359CDE 100% );
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#46C0F2', endColorstr='#359CDE');
	background-color:#46C0F2;
	-moz-border-radius:6px;
	-webkit-border-radius:6px;
	border-radius:6px;
	border:1px solid #3897C4;
	display:inline-block;
	color:#ffffff;
	font-family:arial;
	font-size:12px;
	font-weight:bold;
	padding:5px 16px;
	text-decoration:none;
}.btn_submit_1:hover {
	background:-webkit-gradient( linear, left top, left bottom, color-stop(0.1, #359CDE), color-stop(1, #46C0F2) );
	background:-moz-linear-gradient( center top, #359CDE 10%, #46C0F2 100% );
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#359CDE', endColorstr='#46C0F2');
	background-color:#359CDE;
}.btn_submit_1:active {
	position:relative;
	top:1px;
}
.btn_close_1 {
    background: url("../images/bd_iocn1.gif") no-repeat scroll 0 3px rgba(0, 0, 0, 0);
}
-->
</style>

//遮罩层显示
function popupDiv(div_id) { 
	var div_obj = $("#"+div_id); 
	var windowWidth = document.documentElement.clientWidth; 
	var windowHeight = document.documentElement.clientHeight; 
	var popupHeight = div_obj.height(); 
	var popupWidth = div_obj.width(); 
	//添加并显示遮罩层 
	$("<div id='mask'></div>").addClass("mask") 
	.width(windowWidth * 0.99) 
	.height(windowHeight * 0.99) 
	.click(function() {hideDiv(div_id); }) 
	.appendTo("body") 
	.fadeIn(200); 
	div_obj.css({"position": "absolute"}) 
	.animate({left: windowWidth/2-popupWidth/2, 
	top: windowHeight/2-popupHeight/2, opacity: "show" }, "slow"); 
	} 

	function hideDiv(div_id) { 
	$("#mask").remove(); 
	$("#" + div_id).animate({left: 0, top: 0, opacity: "hide" }, "slow"); 
	}

function messageAlert(message){
	jAlert(message,"提示");
	setTimeout("$.alerts._hide()",3000);
}
popupDiv('pop-div');

<div id='pop-div' style="width: 300px" class="pop-box">
							<h4>选择信息</h4>
							<div class="pop-box-body">
								<p>
									<input type="button" value="" name="insureConfirm"
										class="btn_submit_1" id="insureConfirm" />
								</p>
								<p>
									<input type="button" value="" name="notInsureConfirm"
										class="btn_submit_1" id="notInsureConfirm" />
								</p>
								<p>（如选择！）</p>
							</div>
							<div class='buttonPanel' style="text-align: right"
								style="text-align: right">
								<input value="关闭" id="btn1" onclick="hideDiv('pop-div');"
									type="button"  />
							</div>
						</div>