2013-09-01 33 views
1

當我在對話框中調用fadeOut時,它只會進行部分淡入淡出,並留下對話框標題所在的灰色標題區域。我嘗試刪除標題以及禁用對話框右上角的退出按鈕的各種屬性,但這不起作用。正如你在下面的腳本中看到的,我希望在表單提交被驗證之後關閉對話框。爲什麼我的jquery對話框完全不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 
+0

嘗試刪除'$(「形式」)顯示();' –

+0

我。嘗試過,仍然有問題。 – Spilot

+0

控制檯中是否有任何錯誤? –

回答

0

好的我想通了。 我擺脫了的beforeClose在對話框初始化代碼參數,並在表單驗證提交處理程序添加此:

$('#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. 
相關問題