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

时间:2008-12-14 19:09:22

标签: javascript jquery jquery-ui modal-dialog jquery-ui-dialog

我对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(); },
    }); 
});

由于

12 个答案:

答案 0 :(得分:110)

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

答案 1 :(得分:14)

嗨,大家好我设法解决了。

我使用了destroy而不是关闭函数(它没有任何意义)但它有效!

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

答案 2 :(得分:12)

在最后一行,请勿使用$(this).remove()代替$(this).hide()

编辑:为了澄清,在关闭点击事件中,您将从DOM移除#terms div,这就是为什么它不会回来。你只需要隐藏它。

答案 3 :(得分:9)

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

我在想,一旦你清除了它,就应该修复你所描述的“从链接开放”问题。

答案 4 :(得分:3)

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

答案 5 :(得分:3)

这是一个超级老线程,但由于答案甚至说“它没有任何意义”,我想我会添加答案......

原帖使用$(this).remove();在关闭处理程序中,这实际上会从DOM中删除对话框div。尝试再次初始化对话框不起作用,因为删除了div。

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

来自文档:

  

破坏()

     
    

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

  

那就是说,只有在你有充分理由的情况下才能销毁或取消。

答案 6 :(得分:3)

对我而言,这种方法有效:

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

答案 7 :(得分:2)

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

作品!

答案 8 :(得分:1)

.close()是一般的,可用于引用更多对象。 .dialog('close')只能与对话框一起使用

答案 9 :(得分:1)

我使用对话框作为对话框文件浏览器和上传器,然后我重写了这样的代码

var dialog1 = $("#dialog").dialog({ 
              autoOpen: false, 
              height: 480, 
              width: 640 
}); 
$('#tikla').click(function() {  
    dialog1.load('./browser.php').dialog('open');
});   
一切似乎都很有效。

答案 10 :(得分:1)

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

  }

}

一切正常

希望这有助于某人

0

答案 11 :(得分:0)

jQuery文档包含本文的链接 'Basic usage of the jQuery UI dialog' 这解释了这种情况以及如何解决它。