jquery真的不错！
做了一个模式窗体，弹出的登录窗口是另一个页面，方便修改。
下面是Common.js内容
Code$(function(){
$.extend({
//显示窗体
showDialog:function(loginPage,loadingimg){
$("body").append("<div id='bgDiv'></div><div id='loginbgDiv' style='position:fixed !important; position:absolute; z-index:1001; text-align:center;top:50%; left:50%;'></div>");
$("#bgDiv").css({'position':'absolute','left':'0','top':'0px','z-index':'1000','background':'lightgrey','filter':'alpha(opacity=40)','opacity':'0.4','width':'100%','height':'100%'});
$.ajax({
url:loginPage,
beforeSend:function(xmlhttprequest){
$("#loginbgDiv").append("<img src='"+loadingimg+"'></img>");
},
success:function(data,status){
$("#loginbgDiv").load(loginPage);
},
error:function(xmlhttprequest,error){
$("#loginbgDiv").html(error);
}
});
},
//隐藏窗体
hideDialog:function()
{
$("#bgDiv").remove();
$("#loginDiv").fadeOut();
}
});
});
调用：
Code<button id="btn" onclick="$.showDialog('login.htm',http://www.cnblogs.com/imges/loading.gif')">Open the Dialog</button>
<!-- 第一个参数传递弹出窗体加载的htm页路径，第二个参数为加载显示的图片 -->
下面是login.htm代码
Code<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>Untitled Page</title>
<style type="text/css">
#loginDiv {background:#FFFCC7;border:#F0B645 solid 10px; width:400px; height:165px; margin-top:-100px; margin-left:-200px;}
</style>
<script src="../jquery.js" type="text/javascript"></script>
<script type="text/javascript" src="Common.js"></script>
<script language="javascript" type="text/javascript">
$(function(){
$("#loginDiv").fadeIn();
$("#loginin").click(function(){
$.get("test.aspx?index=5",{name:$(":text").val(),pwd:$(":password").val()},function(xml){
if(xml.toLowerCase()=="success")
{
$.hideDialog();
$("#btn").hide();
$("body").append("登陆成功");
}
else
alert("fail");
});
});
});
</script>
</head>
<body>
<div id='loginDiv' style="display:none">
<table>
<tr>
<td colspan="2" align="center"><b>登录</b></td>
</tr>
<tr>
<td>用户名：</td>
<td><input type="text" /></td>
</tr>
<tr>
<td>密码：</td>
<td><input type="password" /></td>
</tr>
<tr>
<td colspan="2" align="center"><input id="loginin" type="button" value="登录" /></td>
</tr>
<tr>
<td colspan="2" align="center">用户名和密码为admin</td>
</tr>
</table>
</div>
</body>
</html>
,
这个送给你！
posted on
