無法獲得自定義對話框以使用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

回答

相關問題