【问题标题】:why won't my jquery dialog fully fadeOut()?为什么我的 jquery 对话框不能完全淡出()?
【发布时间】:2013-09-01 16:06:35
【问题描述】:

当我在我的对话框上调用 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

【问题讨论】:

  • 尝试删除`$('form').show();`
  • 我试过了,还是有问题。
  • 控制台有错误吗?
  • apache控制台没有相关错误,没有。
  • 我的意思是javascript控制台。不管怎样,你的错误现在似乎已经解决了。

标签: jquery-ui jquery-ui-dialog


【解决方案1】:

好的,我想通了。 我去掉了对话框初始化代码中的 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. 

【讨论】:

    猜你喜欢
    • 2018-09-03
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2011-03-26
    • 1970-01-01
    • 2023-03-23
    • 2012-08-17
    相关资源
    最近更新 更多