请推荐一款适合button的jquery弹出页面
以下新增按钮代码，我就是想用弹出jquery效果的新增页面
<input type="button" class="btn" id="add_btn" value="新 增" />
<!DOCTYPE HTML>
<html>
<head>
<title>遮罩弹窗</title>
<meta charset="UTF-8" />
<script type="text/javascript" src="jquery-1.9.1.js"></script>
<script>
function showBg(ct,content){
var bH=$(document).height();
var bW=$("body").width();
var objWH=getObjWh(ct);
$("#fullbg").css({width:bW,height:bH,display:"block"});
var tbT=objWH.split("
[解决办法]
")[0]+"px";
var tbL=objWH.split("
[解决办法]
")[1]+"px";
$("#"+ct).css({top:tbT,left:tbL,display:"block"});
$("#"+content).html("<div style='text-align:center'>DIV弹窗...</div>");
$(window).scroll(function(){resetBg()});
$(window).resize(function(){resetBg()});
}
function getObjWh(obj){
var st=document.documentElement.scrollTop;//滚动条距顶部的距离
var sl=document.documentElement.scrollLeft;//滚动条距左边的距离
var ch=document.documentElement.clientHeight;//屏幕的高度
var cw=document.documentElement.clientWidth;//屏幕的宽度
var objH=$("#"+obj).height();//浮动对象的高度
var objW=$("#"+obj).width();//浮动对象的宽度
var objT=Number(st)+(Number(ch)-Number(objH))/2;
var objL=Number(sl)+(Number(cw)-Number(objW))/2;
return objT+"
[解决办法]
"+objL;
}
function resetBg(){
var fullbg=$("#fullbg").css("display");
if(fullbg=="block"){
var bH2=$(document).height();
var bW2=$("body").width();
$("#fullbg").css({width:bW2,height:bH2});
var objV=getObjWh("dialog");
var tbT=objV.split("
[解决办法]
")[0]+"px";
var tbL=objV.split("
[解决办法]
")[1]+"px";
$("#dialog").css({top:tbT,left:tbL});
}
}
//关闭灰色JS遮罩层和操作窗口
function closeBg(){
$("#fullbg").css("display","none");
$("#dialog").css("display","none");
}
</script>
<style>
*{
font-size:12px;
}
#fullbg
{
background-color: Gray;
display: none;
z-index: 3;
position: absolute;
left: 0px;
top: 0px;
filter: Alpha(Opacity=30);
-moz-opacity: 0.4;
opacity: 0.4;
}
#dialog
{
position: absolute;
width: 200px;
height: 200px;
background: #F00;
display: none;
z-index: 5;
}
#main
{
height: 1500px;
}
</style>
</head>
<body>
<div id="main">
<a href="#this" onclick="showBg('dialog','dialog_content');">点击这里出现JS遮罩层</a>
</div>
<!--JS遮罩层-->
<div id="fullbg"></div>
<!--JS遮罩层结束-->
<!--对话框-->
<div id="dialog">
<div id="dialog_content"></div>
<div style="text-align:center;"><a href="#" onclick="closeBg();">关闭</a></div>
</div>
<!--JS遮罩层上方的对话框-->
</body>
</html>
