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

Question

我遇到了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(); }, 
    }); 
}); 

感谢

最后一行

Answer 1

嗨，我设法解决它。

我用摧毁，而不是关闭功能（它没有任何意义），但它的工作！

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

Answer 2

，不要使用$(this).remove()使用$(this).hide()来代替。

编辑：为了澄清，在关闭点击事件，你正在从DOM删除#terms div这就是为什么它不回来。你只需要隐藏它。

Answer 3

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

作品！

Answer 4

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

Answer 5

我相信你一次只能初始化对话框。上面的例子试图在每次点击#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' }); 
}); 

我在想，一旦你清楚了，它应该解决您所描述的“开放链接”的问题。

Answer 6

.close（）是mor通用的，可用于引用更多的对象。 .dialog（“亲密”）只能与对话

Answer 7

使用jQuery的文档有一个链接到这篇文章 “Basic usage of the jQuery UI dialog” 解释这种情况，如何解决它。

Answer 8

对我来说，这种方法的工作原理：

对话框可以通过点击对话框中的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(); 
       } 
}); 

Answer 9

我使用对话框作为对话的文件浏览器，并上传然后我重写这样

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

一切的代码似乎工作的伟大。

Answer 10

我有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.

Answer 11

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

Answer 12

这是一个超级旧线，但由于答案甚至说，“这是没有任何意义”，我以为我想补充的答案...

的原贴使用$（本） 。去掉（）;在关闭处理程序中，这实际上会从DOM中删除对话框div。尝试重新初始化对话框将无法工作，因为div已被删除。

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

从文档：

destroy（）方法

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

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