请推荐一款适宜button的jquery弹出页面-JavaSript-爱易网页

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

日期：2014-05-16　浏览次数：20394 次

请推荐一款适合button的jquery弹出页面
以下新增按钮代码，我就是想用弹出jquery效果的新增页面



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

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

------解决方案--------------------

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

免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。

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

相关资料更多>

推荐阅读更多>