请推荐一款适合button的jquery弹出页面

zhuhao 2013-04-14 03:41:58

以下新增按钮代码，我就是想用弹出jquery效果的新增页面



 <input type="button" class="btn" id="add_btn" value="新 增"  />

我在网上找了很多，都没有介绍用button弹出的jquery效果页面，请哪位大大推荐一款适合button的jquery弹出页面

...全文

116 5 打赏收藏转发到动态举报

写回复

用AI写文章

5 条回复

切换为时间正序

请发表友善的回复…

发表回复

CC_AV 2013-04-15

打赏
举报

<!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>

原来写过的，根据网上的代码做参考的。不知道是不是楼主想要的样式