无法获得自定义对话框以使用DirtyForms

我正在使用DirtyForms并且插件的基本功能正在工作。浏览器在用户试图离开页面时抛出一个确认对话框。无法获得自定义对话框以使用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对话框在同一页面上工作。我不确定我在这里可能会错过什么。任何帮助或见解将不胜感激。

来源

2013-03-25 edeneye

你可以解决这个问题，我们遇到了同样的问题。 – JonH 2014-04-24 14:53:49

最可能的问题是，您的HTML标记中没有div标记，其ID为unsavedChanges。所以，你应该添加任何的HTML ...

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

或JavaScript中的等价...

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

如果这不是问题，我建议你修改你的问题包括：Minimal, Complete, and Verifiable Example ，可以通过发布整个HTML文档或使用诸如JSFiddle的服务。

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

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

来源

2016-02-21 11:54:28 NightOwl888

无法获得自定义对话框以使用DirtyForms

回答

相关问题