2008年1月15日 星期二

網頁離開頁面跳出確認視窗(by jQuery)

  有在使用Gmail的人應該都知道,在撰寫郵件時有個貼心的小功能會在你尚未編輯完成,但卻按其他的超連結或關閉視窗時,會跳出一個小視窗提醒你要離開此頁面,資料會消失,這個貼心的小功能其實很簡單就能完成唷。


##CONTINUE##  這個功能是使用Windows.OnBeforeUnLoad這個函數完成的,jQuery也有提供關於這個變數的用法,而且應用jQuery的其他語法,可以做到頁面有變更的時候才挑出這個視窗提醒唷。

var modified = false;
$(document).ready(function() {
$("input,select,textarea").change( function() {
modified = true;
});
});

window.onbeforeunload = function confirmExit(){
if (modified)
return '有尚未儲存的資料,確定要離開嗎?'; //自訂提示
}
  接下來只需要在送出時把modified宣告為fals,這樣在送出時就不會跳出是否要離開的頁面了,不過這個缺點是,只能自訂圖片中紅色區域的字樣,無法像Gmail一樣,完全跳出自訂的視窗。

沒有留言:

張貼留言