当前位置:  开发笔记 > 编程语言 > 正文

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

如何解决《jQueryUI对话框-关闭后无法打开》经验,为你挑选了4个好方法。

我有一个问题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> Shane Fulmer..:

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



2> David Bonnic..:

嗨伙计我设法解决了它.

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

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


几乎.你是第一次启动它是正确的,但之后它是.dialog("打开")和.dialog("关闭")
如果使用该方法,Destroy将起作用,但要使close()工作,首先实例化对话框,然后使用dialog.show()显示它,然后使用dialog.close()关闭它,它将重新打开而没有问题.

3> Darko Z..:

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

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



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

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

推荐阅读
吻过彩虹的脸_378
这个屌丝很懒,什么也没留下!
DevBox开发工具箱 | 专业的在线开发工具网站    京公网安备 11010802040832号  |  京ICP备19059560号-6
Copyright © 1998 - 2020 DevBox.CN. All Rights Reserved devBox.cn 开发工具箱 版权所有