jquery-ui - 私のjqueryダイアログが完全にfadeOut()しないのはなぜですか?

Question

ダイアログでfadeOutを呼び出すと、部分的なフェードのみが行われ、ダイアログのタイトルがある灰色のヘッダー領域が残ります。タイトルと、ダイアログの右上隅にある終了ボタンを無効にするさまざまな属性を削除しようとしましたが、うまくいきませんでした。以下のスクリプトでわかるように、フォームの送信が検証された後にダイアログを閉じる必要があります。

//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