无法让自定义对话框与脏窗体一起使用

Question

我正在使用DirtyForms和插件的基本功能正在工作。当用户试图从一个页面导航离开时，浏览器会弹出一个确认对话框。

我们使用jQuery UI的对话框进行模态确认，我正试图让它与DirtyForms一起工作，它有一个直接引用jQuery UI对话框的例子。我使用的例子直接从他们的页面设置自定义对话框，但它不使用jQuery对话框，它仍然使用浏览器的原生对话框:

$.DirtyForms.dialog = {
    selector: '#unsavedChanges',
    fire: function(message, dlgTitle) {
        $('#unsavedChanges').dialog({title: dlgTitle, width: 350, modal: true});
        $('#unsavedChanges').html(message);
    },
    bind: function() {
        $('#unsavedChanges').dialog('option', 'buttons',
            [
                {
                    text: "Stay Here",
                    click: function(e) {
                        $.DirtyForms.choiceContinue = false;
                        $(this).dialog('close');
                    }
                },
                {
                    text: "Leave This Page",
                    click: function(e) {
                        $.DirtyForms.choiceContinue = true;
                        $(this).dialog('close');
                    }
                }
            ] 
        ).bind('dialogclose', function(e) {
            // Execute the choice after the modal dialog closes
            $.DirtyForms.choiceCommit(e);
        });
    },
    refire: function(content) {
        return false;
    },
    stash: function() {
        return false;
    }
}

打开插件的调试后，我没有收到任何错误(或任何其他JS错误)，但是模态对话框不会触发，只有浏览器的原生对话框。在同一页面上的其他实现的jQuery UI对话框也可以工作。我不知道我错过了什么。如有任何帮助或见解，我将不胜感激。

Answer 1

最可能的问题是您的HTML标记中没有div标记，其id为unsavedChanges。因此，您应该添加HTML…

<div id="unsavedChanges" style="display:none;" />

或JavaScript中的等价内容…

var $dlg = $('<div id="unsavedChanges" style="display:none;" />'); 
$('body').append($dlg);

如果这不是问题，我建议你编辑你的问题，包括一个最小的，完整的，可验证的例子，要么通过发布整个HTML文档，要么通过使用JSFiddle等服务。

注意:自定义对话框仅在用户单击页面中的超链接时起作用。当用户与浏览器的导航交互时，将显示浏览器的对话框(如果有的话)。这是因为没有办法用自定义对话框覆盖浏览器的默认导航行为。

在版本2中。X，现在可以自定义事件绑定，所以你可以添加元素，而不是超链接，如果点击他们从当前页面导航。