覆盖整个browser的半透明div弹出div
Code
/************ajaxpost.js*************************
$(document).ready(function(){
hideAll();
});
function hideAll(){
$("#divShow").hide();
$("#divDlg").hide();
}
function showDiv(){
$("#divShow").show();
$("#divDlg").show(); }
var pid=-1;
function doModify(tid){
showDiv();
$("#theName").html(tid);
pid=tid;
}
function updateModify(){
var pwd1=$("#pwd1").val();
var pwd2=$("#pwd2").val();
if(pwd1==0 || pwd2==0 ){
alert("密码不能为空,请重新输入!");
return false;
}
if(pwd1!=pwd2){
alert("两次输入的密码不一致,请重新输入!");
return false;
}
$.post("zModifyPwd.asp",{id:pid,pwd:pwd1,verycode:"1w2c3g4s5u6p7e8r"},function(data){
if(data==1){
alert("密码修改成功!\n请妥善保管好您的密码.");
hideAll();
$("#pwd1").val("");
$("#pwd2").val("");
}
else{
alert("密码提交时发生异常!保存失败.");
}
});
}
/****************************************/
<script type="text/javascript" src="../js_me/jquery-1.2.5.pack.js"></script>
<script type="text/javascript" src="../js_me/ajaxpost.js"></script>
<style type="text/css">
#divShow{
position:absolute;
z-index:999;
width:100%;
height:100%;
filter:alpha(opacity=70);
-moz-opacity:0.70;
opacity:0.70;
background-color:#000;
left:0;
top:0;
text-align:center;
vertical-align:middle;
}
#divDlg {
position:absolute;
height:100%;
width:100%;
text-align:center;
vertical-align:middle;
z-index:1000;
color:#000;
font-size:13px;
left:0;
top:0;
}
</style>
<div id="divShow"></div>
<div id="divDlg">
<form id="frmAjax" name="form1" method="post" action="">
<table bgcolor="#CCCCCC" width="375" height="122" border="1" cellpadding="0" cellspacing="0" bordercolor="#aaa"
style=" border-collapse:collapse; margin:150 auto;">
<tr>
<td colspan="2" align="center"> 你要修改的用户ID为:
<span id="theName" style=" font-size:14px; color:red; font-weight:bold;" > </span></td>
</tr>
<tr>
<td colspan="2" align="center">
较安全的密码应包含字母数字特殊符号,如<span style=" font-size:14px; color:red; font-weight:bold;">xyz123&(*hello<span>
</td>
</tr>
<tr>
<td width="138" align="right">您的新密码:</td>
<td width="231">
<input type="password" onMouseOver="javascript:this.select();" name="pwd1" id="pwd1" />
</td>
</tr>
<tr>
<td align="right">请再次输入:</td>
<td><input type="password" onMouseOver="javascript:this.select();" name="pwd2" id="pwd2" /></td>
</tr>
<tr>
<td colspan="2" align="center">
<input name="btnSubmit" type="button" id="btnSubmit" value="按钮" onClick="javascript:updateModify();" />
<input type="button" name="Submit2" value="关闭" onClick="javascript:hideAll();" /></td>
</tr>
</table>
</form>
</div>
/************ajaxpost.js*************************
$(document).ready(function(){
hideAll();
});
function hideAll(){
$("#divShow").hide();
$("#divDlg").hide();
}
function showDiv(){
$("#divShow").show();
$("#divDlg").show(); }
var pid=-1;
function doModify(tid){
showDiv();
$("#theName").html(tid);
pid=tid;
}
function updateModify(){
var pwd1=$("#pwd1").val();
var pwd2=$("#pwd2").val();
if(pwd1==0 || pwd2==0 ){
alert("密码不能为空,请重新输入!");
return false;
}
if(pwd1!=pwd2){
alert("两次输入的密码不一致,请重新输入!");
return false;
}
$.post("zModifyPwd.asp",{id:pid,pwd:pwd1,verycode:"1w2c3g4s5u6p7e8r"},function(data){
if(data==1){
alert("密码修改成功!\n请妥善保管好您的密码.");
hideAll();
$("#pwd1").val("");
$("#pwd2").val("");
}
else{
alert("密码提交时发生异常!保存失败.");
}
});
}
/****************************************/
<script type="text/javascript" src="../js_me/jquery-1.2.5.pack.js"></script>
<script type="text/javascript" src="../js_me/ajaxpost.js"></script>
<style type="text/css">
#divShow{
position:absolute;
z-index:999;
width:100%;
height:100%;
filter:alpha(opacity=70);
-moz-opacity:0.70;
opacity:0.70;
background-color:#000;
left:0;
top:0;
text-align:center;
vertical-align:middle;
}
#divDlg {
position:absolute;
height:100%;
width:100%;
text-align:center;
vertical-align:middle;
z-index:1000;
color:#000;
font-size:13px;
left:0;
top:0;
}
</style>
<div id="divShow"></div>
<div id="divDlg">
<form id="frmAjax" name="form1" method="post" action="">
<table bgcolor="#CCCCCC" width="375" height="122" border="1" cellpadding="0" cellspacing="0" bordercolor="#aaa"
style=" border-collapse:collapse; margin:150 auto;">
<tr>
<td colspan="2" align="center"> 你要修改的用户ID为:
<span id="theName" style=" font-size:14px; color:red; font-weight:bold;" > </span></td>
</tr>
<tr>
<td colspan="2" align="center">
较安全的密码应包含字母数字特殊符号,如<span style=" font-size:14px; color:red; font-weight:bold;">xyz123&(*hello<span>
</td>
</tr>
<tr>
<td width="138" align="right">您的新密码:</td>
<td width="231">
<input type="password" onMouseOver="javascript:this.select();" name="pwd1" id="pwd1" />
</td>
</tr>
<tr>
<td align="right">请再次输入:</td>
<td><input type="password" onMouseOver="javascript:this.select();" name="pwd2" id="pwd2" /></td>
</tr>
<tr>
<td colspan="2" align="center">
<input name="btnSubmit" type="button" id="btnSubmit" value="按钮" onClick="javascript:updateModify();" />
<input type="button" name="Submit2" value="关闭" onClick="javascript:hideAll();" /></td>
</tr>
</table>
</form>
</div>