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>