divs are not hidden when buttons are there, why?

here's my code

 if(userid == ""){
        $( "#dialog:ui-dialog" ).dialog( "destroy" );

        $( "#dialog-confirm" ).dialog({
            resizable: false,
            height: 230,
        width: 350,
            modal: true,
            buttons: {
                "Register": function(){
                    $(this).dialog("close");
                $('div#registerpopup').dialog({
                   resizable: false,
                   height: 485,
                   width: 420,
                   modal: true,
                   buttons: {
                      "Register" : function(){
                        var valid = true;
                        valid = valid && checkLength(username,"Username",1,30);
                        valid = valid && checkPassword(password,"Password",7,);
                        valid = valid && checkRetype(password,retypepassword);
                        valid = valid && checkRegexp(emailaddress,emailRegex,"Emailaddress");
                        valid = valid && checkSecretquestion(secretquestion,"Secret Question");
                        valid = valid && checkSecretquestion(secretanswer,"Secret Answer");
                        if(valid){
                          $.ajax({
                             type: "POST",
                             url: "classes/ajax.registerpopup.php",
                             timeout: 8000,
                             data: "username="+username+"&password="+password+"&emailaddress="+emailaddress+
                                  "&secretquestion="+secretquestion+"&secretanswer="+secretanswer,
                             success: function(){
                                alert("you are registered now");
                             }
                          });
                          return false;
                        }
                      }
                   }
                });
                },
                "Log in": function() {
                    $(this).dialog("close");
                $('div#loginpopup').dialog({
                  resizable: false,
                  height: 230,
                  width: 350,
                  modal: true
                })
                }
            }
        });
    return false;
 }

this is the supposedly hidden div

<div id="dialog-confirm" title="Register OR Login">
    <p>Before you can submit your cv,<br />please log in or register,registering only takes 2 seconds
    and you will not lose the information you have entered.</p>
</div>

and

          <div id="registerpopup" title="Register" class="form" style="background: #F0F0F0;">
                <p class="validateTips">All form fields are required.</p>

                <form>
                  <table>
                    <tr>
                     <td><label>Username</label></td>
                     <td><input type="text" name="username" id="username" size="12"/></td>
       开发者_如何学JAVA             </tr>
                    <tr>
                     <td><label>Password</label></td>
                     <td><input type="password" name="password" id="password" size="10" value=""/></td>
                    </tr>
                    <tr>
                     <td><label>Re-type Password</label></td>
                     <td><input type="password" name="retypepassword" id="retypepassword" size="10" value=""/></td>
                    </tr>
                    <tr>
                     <td><label>Email Address</label></td>
                     <td><input type="text" name="emailaddress" id="emailaddress" value=""/></td>
                    </tr>
                    <tr>
                     <td><label>Secondary Email Address</label></td>
                     <td><input type="text" name="secondaryemailaddress" id="secondaryemailaddress" value=""/></td>
                    </tr>
                    <tr>
                    <td><label>Secret Question</label></td>
                    <td><input type="text" name="secretquestion" id="secretquestion" value="" /></td>
                    </tr>
                    <tr>
                     <td><label>Secret Answer</label></td>
                     <td><input type="secretanswer" name="secretanswer" id="secretanswer" value=""/></td>
                    </tr>
                    <tr>
                    <td><label>Reff. Code</label></td>
                    <td><input type="text" name="reffcode" id="reffcode" value="" /></td>
                    </tr>
                  </table>
                </form>
          </div>

now my question is, why is it that the supposedly hidden divs appear when I placed the buttons param of the $('div#registerpopu).dialog({}) ? , but when the buttons are not there, the divs are hidden,,did I miss something ?

Try adding style="display:none;" to the divs you want hidden like this:

<div id="dialog-confirm" title="Register OR Login" style="display:none;">
    <p>Before you can submit your cv,<br />please log in or register,registering only takes 2 seconds
    and you will not lose the information you have entered.</p>
</div>

I hope this helps.