jQuery UI 对话框 - 关闭后不打开

IT技术 javascript jquery jquery-ui modal-dialog jquery-ui-dialog
2021-03-02 01:37:11

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

谢谢

6个回答

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

这完美地工作。jQuery UI 文档在这里不是很清楚。但是dialog函数用于初始化、显示和隐藏的想法对我来说很有意义。谢谢。
2021-04-17 01:37:11
如果您从可以动态更改的 HTML 加载此对话框，那么为什么它不起作用是非常不直观的。任何人都有可以普遍应用于这些情况的好的解决方案？
2021-05-15 01:37:11
@Milimetric 您始终可以使用 $(this).remove(); 功能在每个对话框按钮的末尾，这样当您再次调用它时，整个对话框将完全从头开始。请注意，此函数的作用与 $(this).dialog("destroy"); 不同。因为它只会将对话框设置回其初始状态，而不会破坏对象。
2021-05-16 01:37:11

我解决了。

我使用了 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' });
});
几乎。你首先初始化它是对的，但之后它是 .dialog("open") 和 .dialog("close")
2021-04-29 01:37:11
如果您使用该方法，销毁将起作用，但要使 close() 起作用，请先实例化对话框，然后使用 dialog.show() 显示它，然后使用 dialog.close() 关闭它，它会重新打开而不会出现问题.
2021-04-30 01:37:11

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

编辑：澄清一下，在关闭单击事件中，您正在#terms从 DOM 中删除div，这就是它不回来的原因。你只需要隐藏它。

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

我想一旦你解决了这个问题，它应该解决你描述的“从链接打开”的问题。

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

可以通过单击对话框上的 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();
               }
});
其它你可能感兴趣的问题
上一篇对象是否在 javascript 深拷贝或浅拷贝中推入数组？ 下一篇如何在 Angular 4 中处理窗口滚动事件？