jQuery UI 对话框 - 关闭后不打开

Posted 2023-03-06

【中文标题】jQuery UI 对话框 - 关闭后不打开

【英文标题】：jQuery UI Dialog Box - does not open after being closed

【发布时间】：2010-09-26 21:09:23

【问题描述】：

jquery-ui dialog box 有问题。

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

如何在不刷新实际页面的情况下回调对话框。

下面是我的代码：

$(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(); ,
    ); 
);

谢谢

【参考方案1】：

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

【讨论】：

这非常有效。 jQuery UI 文档在这里不是很清楚。但是dialog 函数用于初始化、显示和隐藏的想法对我来说很有意义。谢谢。

如果您从可以动态更改的 html 加载此对话框，那么它为什么不起作用是非常不直观的。有人有什么好的解决方案可以普遍适用于这些情况吗？

@Milimetric 您可以随时使用 $(this).remove();函数在每个对话框按钮的末尾，这样当你再次调用它时，整个对话框将从头开始完全重新制作。请注意，此函数的作用不同于 $(this).dialog("destroy");因为它只会将对话框设置回其初始化前状态，而不会破坏对象。

【参考方案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' );
);

【讨论】：

如果你使用该方法，Destroy 将起作用，但要使 close() 起作用，首先实例化对话框，然后使用 dialog.show() 显示它，然后使用 dialog.close() 关闭它，它会毫无问题地重新打开。

差不多。你先初始化它是对的，但在那之后它是 .dialog("open") 和 .dialog("close")

【参考方案3】：

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

编辑：澄清一下，在关闭单击事件中，您正在从 DOM 中删除 #terms div，这就是它不回来的原因。你只需要隐藏它。

【参考方案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' );
);

我在想，一旦你把它弄清楚了，它应该可以解决你描述的“从链接打开”问题。

【参考方案5】：

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

可以通过单击对话框上的 X 或单击“注意”来关闭对话框。我正在添加一个（任意）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();
               
);

【参考方案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>

【参考方案7】：

这是一个超级旧的帖子，但由于答案甚至说“这没有任何意义”，我想我会添加答案......

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

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

来自文档：

销毁()

完全删除对话框功能。这会将元素返回到其 >>pre-init 状态。 此方法不接受任何参数。

也就是说，只有在你有充分理由的情况下才销毁或移除。

【参考方案8】：

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

有效！

【参考方案9】：

.close() 更通用，可用于引用更多对象。 .dialog('close') 只能与对话框一起使用

【参考方案10】：

我将对话框用作对话框文件浏览器和上传器，然后我像这样重写代码

var dialog1 = $("#dialog").dialog( 
              autoOpen: false, 
              height: 480, 
              width: 640 
); 
$('#tikla').click(function()   
    dialog1.load('./browser.php').dialog('open');
);   

一切似乎都很好。

【参考方案11】：

我在 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);
        
    );

  

一切正常

希望这对某人有帮助

哦。

【参考方案12】：

jQuery 文档有指向这篇文章的链接 'Basic usage of the jQuery UI dialog' 这解释了这种情况以及如何解决它。