无法让自定义对话框与 DirtyForms 一起使用

Posted 2023-05-09

【中文标题】无法让自定义对话框与 DirtyForms 一起使用

【英文标题】：Can't get custom dialog to work with DirtyForms

【发布时间】：2013-03-15 01:59:10

【问题描述】：

我正在使用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 对话框工作。我不确定我可能在这里遗漏了什么。任何帮助或见解将不胜感激。

【问题讨论】：

在哪里可以解决这个问题，我们遇到了同样的问题。

【参考方案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 等服务来编辑您的问题以包含Minimal, Complete, and Verifiable Example。

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

在 2.x 版本中，现在可以使用 customize the event binding，因此如果单击超链接会离开当前页面，您可以添加超链接以外的元素。