想把前面做的表单注册合并优化一下  现在遇到问题 弹出层的注册表单无法获取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 />
密码:&nbsp;&nbsp;&nbsp;<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()">
用户名:&nbsp;&nbsp;<input name="username" type="text" maxlength=16 value="" onblur="checkusename(this.value)" /><span id="username" title="0">*请输入用户名</span><br />
密码:&nbsp;&nbsp;&nbsp;&nbsp;<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 />
邮箱:&nbsp;&nbsp;&nbsp;&nbsp;<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>

解决方案 »

  1.   

    建议你使用jq的一个插件来做。
    下面有一个动态模拟的东东,希望对你有帮助.<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)"/>&nbsp;&nbsp;                            <input type="button" name="Button2" value="Cancel" id="Button2" size="10" onclick="cancel();" />                            </td>                        <td>&nbsp;</td>                    </tr>            </table>    </div></body></html>