jQuery UI对话框 - 关闭后无法打开

Question

我遇到了一个问题，关于jquery-ui对话框。

问题在于当我关闭对话框后，再次点击触发它的链接时，它不会再次弹出，除非我刷新页面。

如何在不刷新页面的情况下重新调用对话框。

以下是我的代码：

$(document).ready(function() {
    $('#showTerms').click(function()
    {
        $('#terms').css('display','inline');
        $('#terms').dialog({
            resizable: false,
            modal: true,
            width: 400,
            height: 450,
            overlay: { backgroundColor: "#000", opacity: 0.5 },
            buttons:{ "Close": function() { $(this).dialog("close"); } },
            close: function(ev, ui) { $(this).remove(); },
    }); 
});

谢谢

- David Bonnici

Answer 1

您应该使用$("#terms").dialog({ autoOpen: false });来初始化它。 然后您可以使用$('#terms').dialog('open');来打开对话框, 使用$('#terms').dialog('close');来关闭它。

- Shane Fulmer

---

这个完美地运行了。jQuery UI 的文档在这里不是很清晰。但 dialog 函数用于初始化、显示和隐藏的想法让我理解了这一点。谢谢。 - Steve Cooper

如果您从可以动态更改的HTML中加载此对话框，则很难理解为什么它不起作用。是否有任何通用的好解决方案可供应用于这些情况？ - Milimetric

@Milimetric，你可以在你的对话框按钮的末尾始终使用$(this).remove()函数，这样当你再次调用它时，整个对话框将被完全重建。请注意，这个函数的行为与$(this).dialog("destroy")不同，因为它只将对话框设置回其预初始化状态，而不是销毁对象。 - Jeff Noel

Answer 2

我解决了这个问题。

我使用了 destroy 而不是 close 函数（虽然这没有任何意义），但它起作用了。

$(document).ready(function() {
$('#showTerms').click(function()
{
    $('#terms').css('display','inline');
    $('#terms').dialog({resizable: false,
        modal: true,
        width: 400,
        height: 450,
        overlay: { backgroundColor: "#000", opacity: 0.5 },
        buttons:{ "Close": function() { $(this).dialog('**destroy**'); } },
        close: function(ev, ui) { $(this).close(); },
    });         
});   
$('#form1 input#calendarTEST').datepicker({ dateFormat: 'MM d, yy' });
});

- David Bonnici

---

如果你使用那种方法，destroy() 方法可以起作用，但是要让 close() 方法正常工作，需要先实例化对话框，然后使用 dialog.show() 显示它，最后使用 dialog.close() 关闭它，这样它就可以重新打开而没有问题。 - RaeLehman

几乎正确。你关于先初始化它的说法是对的，但之后需要使用 ".dialog("open")" 和 ".dialog("close")"。 - rdworth

Answer 3

在最后一行不要使用$(this).remove()，而应该使用$(this).hide()。

编辑：为了澄清，在关闭点击事件中，您正在从DOM中删除#terms div，这就是为什么它没有回来的原因。你只需要隐藏它即可。

- Darko Z

Answer 4

我认为你只能初始化对话框一次。上面的示例尝试每次单击＃terms时初始化对话框，这将导致问题。相反，初始化应该发生在单击事件之外。您的示例可能应该类似于：

$(document).ready(function() {
    // dialog init
    $('#terms').dialog({
        autoOpen: false,
        resizable: false,
        modal: true,
        width: 400,
        height: 450,
        overlay: { backgroundColor: "#000", opacity: 0.5 },
        buttons: { "Close": function() { $(this).dialog('close'); } },
        close: function(ev, ui) { $(this).close(); }
    });
    // click event
    $('#showTerms').click(function(){
        $('#terms').dialog('open').css('display','inline');      
    });
    // date picker
    $('#form1 input#calendarTEST').datepicker({ dateFormat: 'MM d, yy' });
});

我认为一旦你解决了这个问题，它应该能够修复你描述的“从链接打开”的问题。

- 26design

Answer 5

这是一个非常古老的帖子，但由于答案甚至说“它没有任何意义”，我想补充一下答案......

原始帖子在close处理程序中使用了$(this).remove();，这实际上会从DOM中删除dialog div。尝试再次初始化对话框将无法工作，因为div已被删除。

使用$(this).dialog('destroy')调用在对话框对象中定义的destroy方法，该方法不会将其从DOM中删除。

来自文档：

destroy()

完全删除对话框功能。这将使元素返回到其初始状态。此方法不接受任何参数。

也就是说，仅在关闭时使用destroy或remove如果你有足够的理由。

- crad

Answer 6

 <button onClick="abrirOpen()">Open Dialog</button>

<script type="text/javascript">
var $dialogo = $("<div></div>").html("Aqui tu contenido(here your content)").dialog({
       title: "Dialogo de UI",
       autoOpen: false,
       close: function(ev, ui){
               $(this).dialog("destroy");
       }
 function abrirOpen(){
       $dialogo.dialog("open");
 }
});

//**Esto funciona para mi... (this works for me)**
</script>

- Joanna Avalos

Answer 7

对我来说，这种方法有效：

通过单击对话框上的X或单击“Bewaren”可以关闭对话框。我添加了一个（任意的）id，因为我需要确保从dom中添加的每个html位都被删除。

$('<div id="dossier_edit_form_tmp_id">').html(data.form)
.data('dossier_id',dossier_id)
.dialog({
        title: 'Opdracht wijzigen',
        show: 'clip',
        hide: 'clip',
        minWidth: 520,
        width: 520,
        modal: true,
        buttons: { 'Bewaren': dossier_edit_form_opslaan },
        close: function(event, ui){ 
                                  $(this).dialog('destroy'); 
                                  $('#dossier_edit_form_tmp_id').remove();
               }
});

- Zilverdistel

Answer 8

$(this).dialog('destroy');

工作正常！

- Benedikt

Answer 9

我在使用jquery-ui覆盖对话框时遇到了同样的问题 - 它只能工作一次，然后除非重新加载页面否则无法继续。我在他们的示例中找到了答案 -
同一页上的多个覆盖层
flowplayer_tools_multiple_open_close
- 谁会想到呢？ :-) -

重要的设置似乎是

oneInstance: false

所以，现在我有这样的代码 -

$(document).ready(function() {

 var overlays = null;

 overlays = jQuery("a[rel]");

 for (var n = 0; n < overlays.length; n++) {

    $(overlays[n]).overlay({
        oneInstance: false, 
        mask: '#669966',
        effect: 'apple',
        onBeforeLoad: function() {
            overlay_before_load(this);
        }
    });

  }

}

一切正常运作，希望对某人有所帮助。O.

- Oleg Ivanov

Answer 10

.close() 更为通用，可以用于更多的对象。.dialog('close') 只能用于对话框。

- John