why won't my jquery dialog fully fadeOut()? - jquery-ui

Question

When I call fadeOut on my dialog it only does a partial fade and leaves the grey header area where the dialog title is. I've tried removing the title as well as the various attributes that disable the exit button in the upper right corner of the dialog, but that didn't work. As you'll see in my script below, I want the dialog to close after the form submission has been validated.
//HTML
<div id="dialog">
<form id="form">
<p id="thanks">Please provide a contact number. It will only be shared with the
host</p><input id="number" name="number" type="text"/>
<button id="submit" type="submit">Submit</button>
</form>
</div>
//JS
if(myConditional){
//FORM IS HIDDEN ON PAGE LOAD AND SHOWN ON CLICK
$('form').show();
$('#dialog').dialog({
//These parameters are meant to disable the dialog close button
closeOnEscape: false,
beforeclose: function (event, ui) { return false; },
dialogClass: "noclose",
title: "Thanks For Volunteeering",
minWidth: 500
});
$('button').button();
}else{
//other code
}
//Validate the phone number before saving it to local storage
$("#form").validate({
rules: {
number : {
required: true
customvalidation: true
}
},
messages: {
number : {
required: "enter a phone number"
}
},
submitHandler: function(form) {
var number = $('#number').val();
localStorage.setItem('number', JSON.stringify(number));
//THIS FADE OUT ISN'T FULLY FADING THE DIALOG
$('#dialog').fadeOut();
} //closes submit handler
});//close validate

Answer 1

Ok I figured it out.
I got rid of the beforeClose parameter in the dialog init code, and in the form validation submit handler I added this:
$('#dialog').fadeOut('slow', function(){
$( this ).dialog( "close" );
});
//The fadeOut method has a call back function you can use with it to do something after the fade is completed.