jquery 弹出层

<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="js/jquery.blockUI.js"></script>

<script type="text/javascript">
	function login(){
		$.blockUI({
			message : $("#box"),
			css : {top:"50%",
				left:"50%",
				marginLeft:"-200px",
				marginTop:"-80px",
				height:"130px",
				width:"400px",
				cursor:"nomal"
				},
			overlayCSS: {cursor: 'nomal'} 	
		});
	}

	function closeAll(){
		$.unblockUI();
	}

</script>

<body bgcolor="white">

	<div id="box" style="display: none;">
		<div style="text-align: left;background-color: gray;">
		登陆窗口
			<div onclick="closeAll();" style="font-size: 12px;float: right;cursor: pointer;">关闭</div>
		</div>
		<table style="margin-left: 60px;margin-top:10px;">
			<tr>
				<td>用户名:</td>
				<td><input type="text" id="name"></td>
			</tr>
			<tr>
				<td>密     码:</td>
				<td><input type="text" id="pass"></td>
			</tr>
		</table>
		<input type="button" id="btn" value="登陆">
		<input type="button" id="reset" value="清空">
	</div>

	<input type="button"  value="登陆" onclick="login();">
	
</body>

[img][/img]

你可能感兴趣的:(JavaScript,jquery)