想把前面做的表单注册合并优化一下 现在遇到问题 弹出层的注册表单无法获取popWin.js中的验证函数 无法进行数据验证 求解~~ 如果把弹出层的注册表单单独写一个html文件 是没有问题的 现在的问题就是加入弹出层后 无法验证了
<html>
<head>
<title> 登陆 </title>
<link href="popWin.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="popWin.js"></script>
<script type="text/javascript">
function showMsg(){
var div = document.getElementById("test").innerHTML;
popWin("注册", div, 400, 200);
}
function check(){
var username = document.login.username1.value;
var pw = document.login.pw1.value;
if(username.length == 0 || pw.length == 0){
alert('用户名或密码不能为空');
break;
}
}
</script>
</head> <body>
<div>
<form name="login" action="login.php" method="post">
用户名:<input name="username1" type="text" value="" /><br />
密码: <input name="pw1" type="password" value="" /><br />
<input type="hidden" />
<input type="submit" value="登陆" onmousedown="check()" />
<input type="button" onclick="showMsg()" value="注册" />
</form>
</div>
<div id="test" style="display:none;">
<form name="myform" action="zhuce.php" method="post" onsubmit="return submitcheck()">
用户名: <input name="username" type="text" maxlength=16 value="" onblur="checkusename(this.value)" /><span id="username" title="0">*请输入用户名</span><br />
密码: <input name="ps" type="password" value="" onkeyup="checkps()" onblur="checkps()" /><span id="ps" title="0">*请输入密码</span><br />
确认密码:<input name="pss" type="password" value="" onkeyup="checkps()" onblur="checkps()" /><span id="pss" title="0">*请再次输入密码</span><br />
邮箱: <input name="email" value="" type="text" onkeyup="checkemail(this.value)" onblur="checkemail(this.value)" /><span id="email" title="0">*请输入邮箱</span><br />
<button type="submit">提交</button>
<button type="reset"">重置</button>
</form>
</div>
</body>
</html>
<html>
<head>
<title> 登陆 </title>
<link href="popWin.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="popWin.js"></script>
<script type="text/javascript">
function showMsg(){
var div = document.getElementById("test").innerHTML;
popWin("注册", div, 400, 200);
}
function check(){
var username = document.login.username1.value;
var pw = document.login.pw1.value;
if(username.length == 0 || pw.length == 0){
alert('用户名或密码不能为空');
break;
}
}
</script>
</head> <body>
<div>
<form name="login" action="login.php" method="post">
用户名:<input name="username1" type="text" value="" /><br />
密码: <input name="pw1" type="password" value="" /><br />
<input type="hidden" />
<input type="submit" value="登陆" onmousedown="check()" />
<input type="button" onclick="showMsg()" value="注册" />
</form>
</div>
<div id="test" style="display:none;">
<form name="myform" action="zhuce.php" method="post" onsubmit="return submitcheck()">
用户名: <input name="username" type="text" maxlength=16 value="" onblur="checkusename(this.value)" /><span id="username" title="0">*请输入用户名</span><br />
密码: <input name="ps" type="password" value="" onkeyup="checkps()" onblur="checkps()" /><span id="ps" title="0">*请输入密码</span><br />
确认密码:<input name="pss" type="password" value="" onkeyup="checkps()" onblur="checkps()" /><span id="pss" title="0">*请再次输入密码</span><br />
邮箱: <input name="email" value="" type="text" onkeyup="checkemail(this.value)" onblur="checkemail(this.value)" /><span id="email" title="0">*请输入邮箱</span><br />
<button type="submit">提交</button>
<button type="reset"">重置</button>
</form>
</div>
</body>
</html>
下面有一个动态模拟的东东,希望对你有帮助.<html xmlns="http://www.w3.org/1999/xhtml"> <head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/><title>弹出模态对话框测试[IE6下测试通过]</title> <style type="text/css"> .hideDlg { height:129px;width:368px; display:none; } .showDlg { background-color:#ffffdd; border-width:3px; border-style:solid; height:129px;width:368px; position: absolute; align:center; z-index:5; } .showDeck { display:block; top:0px; left:0px; margin:0px; padding:0px; width:100%; height:100%; position:absolute; z-index:3; background:#cccccc; filter:"alpha(opacity=80)"; opacity:"80/100"; MozOpacity:"80/100"; } .hideDeck { display:none; }}</style> <script type="text/javascript"> function showDlg() { //显示遮盖的层 var objDeck = document.getElementById("deck"); if(!objDeck) { objDeck = document.createElement("div"); objDeck.id="deck"; document.body.appendChild(objDeck); } objDeck.className="showDeck"; //显示遮盖的层end //禁用select hideOrShowSelect(true); //显示对话框 var w=368; var h=129; var dde=document.documentElement; var obox=document.getElementById('divBox'); obox.style.left=dde.scrollLeft+(dde.offsetWidth-w)/2 +"px"; obox.style.top=dde.scrollTop+(dde.offsetHeight-h)/2 +"px"; document.getElementById('divBox').className='showDlg'; //显示对话框end } function cancel() { document.getElementById('divBox').className='hideDlg'; document.getElementById("deck").className="hideDeck"; hideOrShowSelect(false); } function hideOrShowSelect(v) { var allselect = document.getElementsByTagName("select"); for (var i=0; i<allselect.length; i++) { //allselect[i].style.visibility = (v==true)?"hidden":"visible"; allselect[i].disabled =(v==true)?"disabled":""; } } function resize() { //调整位置 var w=368; var h=129; var dde=document.documentElement; var obox=document.getElementById('divBox'); if (obox.style.display !="none") { obox.style.left=dde.scrollLeft+(dde.offsetWidth-w)/2 +"px"; obox.style.top=dde.scrollTop+(dde.offsetHeight-h)/2 +"px"; } }</script> </head> <body > <input type="button" value="click me" onclick="showDlg();" size="10px" /><br/> <input type="text" value="" size="10px" /><a href="http://www.baidu.com" target="_blank">百度</a><br/> <select> <option selected="selected">1</option> <option>2</option> </select><br/> <div id="divBox" class="hideDlg" style="" > <table width="100%" style="height:100%; width: 100%;" id="table1"> <tr> <td style="height: 20px; text-align: center;" colspan="3">请输入用户名及密码</td> </tr> <tr> <td>用户名</td> <td> <input name="TextBox1" type="text" id="TextBox1" /> </td> <td></td> </tr> <tr> <td>密码</td> <td> <input name="TextBox2" type="text" id="TextBox2" /></td> <td></td> </tr> <tr> <td></td> <td> <input type="button" name="Button1" value="Login" id="Button1" size="10" onclick="alert(TextBox1.value)"/> <input type="button" name="Button2" value="Cancel" id="Button2" size="10" onclick="cancel();" /> </td> <td> </td> </tr> </table> </div></body></html>