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

我有一个问题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(); },
    }); 
});

谢谢

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

我解决了

我使用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' });
});

在最后一行，不要使用$(this).remove()use$(this).hide()来代替。

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

我相信您只能一次初始化对话框。上面的示例尝试在每次单击#terms时初始化对话框。这会引起问题。而是应在click事件之外进行初始化。您的示例可能看起来像这样：

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

我认为，一旦您解决了该问题，它便可以解决您描述的“从链接打开”问题。

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

通过单击对话框上的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();
               }
});

 <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>

这是一个非常老的话题，但是既然答案甚至说“没有任何意义”，我想我应该添加答案...

原始帖子使用$（this）.remove（）; 在关闭处理程序中，这实际上会从DOM中删除对话框div。尝试重新初始化对话框将不起作用，因为div已被删除。

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

从文档中：

破坏（）

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

就是说，只有在有充分理由的情况下，才能将其摧毁或撤离。

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

作品！

.close（）是通用的，可用于引用更多对象。.dialog（'close'）仅可用于对话框

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

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

一切似乎都很好。

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

  }

}

一切都很好

希望这对某人有帮助

哦

jQuery文档具有指向本文“ jQuery UI对话框的基本用法”的链接，该链接说明了这种情况以及如何解决这种情况。