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

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

Answer 2

嗨伙计我设法解决了它.

我使用破坏而不是关闭功能(它没有任何意义)但它有效!

$(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 3

在最后一行,不要使用$(this).remove()use $(this).hide().

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

Answer 4

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

我想,一旦你明白了,它应该修复你所描述的'开放链接'问题.