层的显示问题

我想要的效果是：
1.当我点击提交按钮时，用户名和密码只要有1个为空，就出现提示层，关闭登录层
2.我点击关闭提示层后，登录层就显示我写完下面的代码后就不知道该怎么弄了请大家指点一下。login1为提示层
login2为登录层
         function checklogin()
{
var name=document.getElementById("userName").value;
var pwd=document.getElementById("pwd").value;
if(name==null || name=="" || pwd==null || pwd=="")
{
return false;
}
return true;
}
//关闭登录表单层
function close()
{
if(checklogin()==false)
{
document.getElementById("login1").style.dispaly="block";
document.getElementById("login2").style.dispaly="none";
}
}
         //显示登录表单层
function show()
{
document.getElementById("login1").style.dispaly="none";
document.getElementById("login2").style.dispaly="block";
}<div id="login1" style=" display:none">用户名或密码不能为空
<p onClick="show()">关闭</p></div>    
<div id="login2" style="display:block">
       <form name="form1" method="post" action="简单菜单.html" onSubmit="return checklogin()">
         <table width="900" border="0">
           <tr>
             <td align="right">用户名：</td>
             <td><input type="text" name="userName"></td>
           </tr>
           <tr>
             <td align="right">密码：</td>
             <td><input type="text" name="pwd"></td>
           </tr>
           <tr>
             <td colspan="2" align="center"> <input type="submit" name="Submit" value="提交"></td>
           </tr>
         </table>
       </form>
   </div>

解决方案 »

  1.   

    <script>
     function checklogin() 
     { var name=document.getElementById("userName").value; var pwd=document.getElementById("pwd").value; 
     if(name==null || name=="" || pwd==null || pwd=="") { show();return false; } return true; } 
     //关闭登录表单层  function close() { if(checklogin()==false) { document.getElementById("login1").style.dispaly="block"; document.getElementById("login2").style.dispaly="none"; } } //显示登录表单层  
     function show() 
     {document.getElementById("login1").style.display="block";document.getElementById("login2").style.display="none"; }
     function hidden() 
     {document.getElementById("login1").style.display="none";document.getElementById("login2").style.display="block"; }
    </script>
    <div id="login1" style=" display:none">用户名或密码不能为空 <p onClick="hidden()">关闭</p></div> 
    <div id="login2" style="display:block">  
    <form name="form1" method="post" action="简单菜单.html" onSubmit="return checklogin()">  
    <table width="900" border="0">  <tr>  <td align="right">用户名：</td>  
    <td><input type="text" name="userName"></td>  </tr>  <tr>  <td align="right">密码：</td>  
    <td><input type="text" name="pwd"></td>  </tr>  <tr>  <td colspan="2" align="center"> 
    <input type="submit" name="Submit" value="提交"></td>  </tr>  </table>  </form>  </div>
      

  2.   


    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
    <HTML>
     <HEAD>
      <TITLE> New Document </TITLE>
      <META NAME="Generator" CONTENT="EditPlus">
      <META NAME="Author" CONTENT="">
      <META NAME="Keywords" CONTENT="">
      <META NAME="Description" CONTENT=""> </HEAD> <BODY>
      
      <div id="login1" style="position:absolute; top:200;left:400;display:none">用户名或密码不能为空
    <p onClick="show();">关闭</p></div>    
    <div id="login2" style="display:block">
           <form name="form1" method="post" action="简单菜单.html" onSubmit="return checklogin()">
             <table width="900" border="0">
               <tr>
                 <td align="right">用户名：</td>
                 <td><input type="text" name="userName"></td>
               </tr>
               <tr>
                 <td align="right">密码：</td>
                 <td><input type="text" name="pwd"></td>
               </tr>
               <tr>
                 <td colspan="2" align="center"> <input type="submit" name="Submit" value="提交"></td>
               </tr>
             </table>
           </form>
       </div>
     </BODY>
       <script type="text/javascript">
        function checklogin()
        {
        var name=document.getElementById("userName").value;
        var pwd=document.getElementById("pwd").value;
        if(name==null || name=="" || pwd==null || pwd=="")
        {
            return false;
        }
        return true;
        }
        //关闭登录表单层
        function close()
        {
        if(checklogin()==false)
        {
        document.getElementById("login1").style.display="block";//1.修正了你的"display"单词拼写错误
            document.getElementById("login2").style.display="none";
            }
        }
             //显示登录表单层
        function show()
        {
        document.getElementById("login1").style.display="none";
            document.getElementById("login2").style.display="block";
        }document.getElementsByName("Submit")[0].onclick=function(){//2.在"提交"按钮上新加了这个单击事件,
    close();
    };
      //3.改了你的login1的属性style="position:absolute; top:200;left:400;display:none",给他绝对定位到屏幕中间附近!
      
      </script>
    </HTML>