jQuery UI对话框 - 等到关闭动画完成

时间:2022-08-23 17:55:55

On my website I have two jQuery UI dialogs. One dialog just shows gif image (working animation). I call it before doing AJAX request. After AJAX request is done, I need to close that first dialog, and show second. I do it like this:

在我的网站上,我有两个jQuery UI对话框。一个对话框只显示gif图像(工作动画)。我在做AJAX请求之前调用它。完成AJAX请求后,我需要关闭第一个对话框,然后显示第二个对话框。我是这样做的:

$("#dialog-working").dialog("close");
$("#dialog").dialog("open");

but this obviously isn't working. When I do this, both dialogs are visible for some time.

但这显然不起作用。当我这样做时,两个对话框都可见一段时间。

Because of that, I am searching for a way to open second dialog only after first dialog is close (after his animation has completed). Can you help me ?

因此,我正在寻找一种只在第一个对话框关闭后(动画完成后)打开第二个对话框的方法。你可以帮我吗 ?

Thanks !

谢谢 !

3 个解决方案

#1


4  

Your questin is not very clear. To do something after the dialog closes:

你的任务不是很清楚。在对话框关闭后执行某些操作:

$('#dialog').bind('dialogclose', function(){
    //Do something
});

#2


1  

Check out the dialog close event.

查看对话框关闭事件。

http://jqueryui.com/demos/dialog/#event-close

http://jqueryui.com/demos/dialog/#event-close

#3


1  

Check this

检查一下

Here:

这里:

<div class="demo">
  <div id="dialog">
    <p>This is the default dialog</p>
  </div>
  <div id="opener">Click to open</div>
</div>

And here:

和这里:

$(document).ready(function() {
$("#dialog").dialog({
    autoOpen: false,
    title: 'My dialog title'
});

$("#dialog").dialog();

/* this one beeing of interest for you */
$( "#dialog" ).dialog({
   beforeClose: function(event, ui) {
       alert("dialog is gonna be closed now");
   }
});

$('#opener').click(function() {
    $("#dialog").dialog('open');       
    return false;
});   

});

#1


4  

Your questin is not very clear. To do something after the dialog closes:

你的任务不是很清楚。在对话框关闭后执行某些操作:

$('#dialog').bind('dialogclose', function(){
    //Do something
});

#2


1  

Check out the dialog close event.

查看对话框关闭事件。

http://jqueryui.com/demos/dialog/#event-close

http://jqueryui.com/demos/dialog/#event-close

#3


1  

Check this

检查一下

Here:

这里:

<div class="demo">
  <div id="dialog">
    <p>This is the default dialog</p>
  </div>
  <div id="opener">Click to open</div>
</div>

And here:

和这里:

$(document).ready(function() {
$("#dialog").dialog({
    autoOpen: false,
    title: 'My dialog title'
});

$("#dialog").dialog();

/* this one beeing of interest for you */
$( "#dialog" ).dialog({
   beforeClose: function(event, ui) {
       alert("dialog is gonna be closed now");
   }
});

$('#opener').click(function() {
    $("#dialog").dialog('open');       
    return false;
});   

});