在关闭jQuery UI对话框之前延迟关闭事件

我使用在.in和.out类上运行的CSS动画以下代码。我的问题是，对话框即刻关闭，你根本看不到关闭动画。所以在关闭对话框之前我需要延迟〜500ms。在关闭jQuery UI对话框之前延迟关闭事件

$.extend($.ui.dialog.prototype.options, { 
    modal: true, 
    open: function() { 
     $(this).parents('.ui-dialog').removeClass('out').addClass('in'); 
    } 
}); 

$confirm.dialog({ 

    buttons: { 

     "ok": { 
      text:'Ok', 
      click: function() { $(this).dialog('close'); } 
     }, 

     "cancel": { 
      text:'Cancel', 
      click: function() { $(this).dialog('close'); } 
     } 
    }, 

    beforeClose: function(event, ui) { 

     $('.ui-dialog').removeClass('in').addClass('out'); 

    } 

}).dialog('widget').appendTo('.dialogWrapper');

我尝试添加return false到beforeClose，然后手动调用.dialog('close')功能，但只运行一个无限循环，并手动隐藏对话框似乎被浪费掉的代码（更不用说在对话框的叠加会需要删除，也）

我会很感激在这个问题上的任何帮助。

Si。

来源

2012-11-24 simey.me

我决定运行这个并测试它，这里是你的代码需要，它也是很多的闪烁：

<script type="text/javascript"> 
    function showDialog() { 
     $('#myDialog').on("dialogbeforeclose", function (event, ui) { }); 
     $('#myDialog').dialog({ 
      beforeClose: function myCloseDialog() { 
       alert('Closing Dialog Now...'); 
      } 
     }); 
    } 

</script>

来源

2012-11-26 20:02:16

这是未经测试的，但我会沿着这些线形象的东西会让你在哪里你想成为？

$.extend($.ui.dialog.prototype.options, { 
    modal: true, 
    open: function() { 
     $(this).parents('.ui-dialog').removeClass('out').addClass('in'); 
    } 
}); 

$confirm.dialog({ 

    buttons: { 

     "ok": { 
      text:'Ok', 
      click: function() { closeDialog(this); } 
     }, 

     "cancel": { 
      text:'Cancel', 
      click: function() { closeDialog(this); } 
     } 

    }).dialog('widget').appendTo('.dialogWrapper'); 

function closeDialog(element){ 
     $(element).removeClass('in').addClass('out'); 
     $(element).delay(500); 
     $(element).dialog('close'); 
}

来源

2012-11-25 13:43:45

非常感谢David Lloyd Brookes的回复;这是我需要得到这个代码在这里的跳板：

// function to close dialog using css animations. 
$.fn.animateDialogClose = function() { 
    var $dialog = $(this); 
    $dialog.parents('.ui-dialog').removeClass('in').addClass('out'); 
    setTimeout(function() { $dialog.dialog('close'); }, 500); 
}; 


$confirm.dialog({ 
    buttons: { 
     "ok": { 
      text:'Ok', class:'btn red', 
      click: function() { } 
     }, 
     "cancel": { 
      text:'Cancel', class:'btn', 
      click: function() { $(this).animateDialogClose(); } 
     } 
    } 

}).dialog('widget').appendTo('.ui-dialog-perspective-wrapper');

目前仍然是不幸的问题，虽然这仅适用明确设置它的按钮，而不是（例如）的“X”关闭按钮或退出键。我会upvote，但我不认为你已经回答了我的问题......甚至可能没有答案:(

来源

2012-11-25 19:07:20

尝试：$ dialog.bind（'dialogclose'，函数（事件）{}}）; –

在关闭jQuery UI对话框之前延迟关闭事件

回答

相关问题