這是可能的，但只有當用戶單擊頁面內的超鏈接。如果用戶使用瀏覽器遠離頁面，他們將得到默認瀏覽器對話框，該對話框沒有保存選項。
骯髒的形式自動連接（和刪除處理）到beforeunload事件，讓你嘗試創建另一個事件處理程序肯定會失敗。使用髒表單時，絕不應該這樣做。
你沒有提到你想要使用哪種模式對話框框架，所以我只會使用jQuery UI對話框來展示一個例子。集成其他對話框框是類似的。爲此，您可能需要查看existing pre-built dialogs的源代碼。
此外，您的用例有點短。如果用戶想要導航並忽略這些更改會怎麼樣？我添加了一個包含額外選項的示例。
<html>
<head>
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/jquery.ui/1.11.3/jquery-ui.min.css" />
</head>
<body>
<script type="text/javascript" src="//cdn.jsdelivr.net/g/[email protected],[email protected],[email protected]"></script>
<script type="text/javascript">
$(document).ready(function() {
// This is required by jQuery UI dialog
$('body').append('<div id="dirty-dialog" style="display:none;" />');
// This must be called before the first call to .dirtyForms
$(document).bind('bind.dirtyforms', function (ev, events) {
var originalOnRefireClick = events.onRefireClick;
events.onRefireClick = function (ev) {
if (saveForm) {
// TODO: Replace this with your AJAX function
// to save the form.
alert('saving form...');
}
originalOnRefireClick(ev);
};
});
// Flag indicating whether or not to save the form on close.
var saveForm = false;
$('.mainForm').dirtyForms({
dialog: {
// Custom properties to allow overriding later using
// the syntax $.DirtyForms.dialog.title = 'custom title';
title: 'Are you sure you want to do that?',
proceedAndSaveButtonText: 'Save Changes & Continue',
proceedAndCancelButtonText: 'Cancel Changes & Continue',
stayButtonText: 'Stay Here',
preMessageText: '<span class="ui-icon ui-icon-alert" style="float:left; margin:2px 7px 25px 0;"></span>',
postMessageText: '',
width: 650,
// Dirty Forms Methods
open: function (choice, message) {
$('#dirty-dialog').dialog({
open: function() {
// Set the focus on close button. This takes care of the
// default action by the Enter key, ensuring a stay choice
// is made by default.
$(this).parents('.ui-dialog')
.find('.ui-dialog-buttonpane button:eq(2)')
.focus();
},
// Whenever the dialog closes, we commit the choice
close: choice.commit,
title: this.title,
width: this.width,
modal: true,
buttons: [
{
text: this.proceedAndSaveButtonText,
click: function() {
// Indicate the choice is the proceed action
choice.proceed = true;
// Pass a custom flag to indicate to save the data first
// in the onRefireClick event
saveForm = true;
$(this).dialog('close');
}
},
{
text: this.proceedAndCancelButtonText,
click: function() {
// Indicate the choice is the proceed action
choice.proceed = true;
// Pass a custom flag to indicate not to save the data
// in the onRefireClick event
saveForm = false;
$(this).dialog('close');
}
},
{
text: this.stayButtonText,
click: function() {
// We don't need to take any action here because
// this will fire the close event handler and
// commit the choice (stay) for us automatically.
$(this).dialog('close');
}
}
]
});
// Inject the content of the dialog using jQuery .html() method.
$('#dirty-dialog').html(this.preMessageText + message + this.postMessageText);
},
close: function() {
// This is called by Dirty Forms when the
// Escape key is pressed, so we will close
// the dialog manually. This overrides the default
// Escape key behavior of jQuery UI, which would
// ordinarily not fire the close: event handler
// declared above.
$('#dirty-dialog').dialog('close');
}
}
});
});
</script>
Change one of the fields below, then click "Go to Google" to try to navigate away.
<form class="mainForm" action="jqueryui.html">
First name: <input type="text" name="fname"><br>
Last name: <input type="text" name="lname"><br>
<input type="submit" value="Submit">
</form>
<a href="http://www.google.com/">Go to Google</a>
</body>
</html>
的例子使用custom event binding附加到onRefireClick事件處理程序，它就會引發choice.proceed = true，但是當它是false不是。
在將來，如果您對jQuery的骯髒的形式有任何疑問，您應該包括在問題jQuery的dirtyforms標籤讓你更容易獲得足夠的答案。 – NightOwl888