風格化Javascript退出彈出菜單

我正在嘗試創建並設置用戶嘗試離開頁面時出現的退出彈出窗口（邊框，背景，字體）。這是腳本的例子：顯示風格化Javascript退出彈出菜單

$(window).bind('beforeunload', function(){ 

$(function() { 
    alert("My message"); 
}); 

return ' '; 

});

警告框第一，用戶必須點擊OK所以退出確認框可能出現。這樣做可以工作，因爲它可以防止退出確認框立即出現在頂部。確認框消息：

This page is asking you to confirm that you want to leave - data you have entered may not be saved. (Leave page/Stay on page)

但我知道這是不可能改變alertbox的風格，所以我使用jQuery UI的對話框（）嘗試：

$(window).bind('beforeunload', function(){ 

$(function() { 
    $("#dialog").dialog(); 
}); 

return ' '; 
});

不幸的是，這並不能作爲工作預期也是如此，因爲對話沒有與警報相同的功能。對話框與確認框同時出現。

我怎樣才能解決這個問題？

來源

2013-07-24 rovad

您可以嘗試通過取消onbeforeunload事件來禁用本機出口模式。

window.onbeforeunload = nullAs explained here

這意味着你必須阻止默認事件行爲從當前頁面導航離開時，讓您可以與您所選擇的模式引擎顯示自定義模式。

來源

2013-07-24 17:31:11 Ken

我讀您發佈的參考鏈路上的答案，但我並不需要廢止默認確認「休假頁/留在頁面」窗口，因爲那裏是（靜態）頁面上沒有輸入。我使用'beforeunload'來防止用戶在顯示退出彈出窗口之前離開頁面。這是通過顯示常規警報框FIRST來完成的，然後出現確認框。有沒有辦法模擬對話框的行爲，如警報框的行爲？我希望對話框出現之前確認框（離開頁/留在頁），這樣我就可以申請，我不能適用於常規警告框所需的樣式？ – rovad

沒錯。我的意思是：如果正在您的用戶離開該頁面的操作是點擊事件，您可以附加preventDefault（）以持續禁止頁面。在那裏你可以啓動你的模態，並且在完成模態中你需要做的任何事情之後，你可以改變'window.location'對象將頁面轉發到預定目標。 – Ken

@rovad是否對此有所幫助？ – Ken

我有類似的要求，我想使用漂亮的HTML消息，而不是默認的js消息。花了一些時間後，我終於找到了一個辦法。我已經使用jQuery Colorbox模式這是非常有用的任何模式的要求，而不只是在這裏。

基本上你可以使用mousemove事件，並發現如果Y座標（e.clientY）小於5。因此，這將每次當鼠標靠近地址欄（用戶鍵入新的URL或試圖關閉窗口）時被解僱。

jQuery(document).ready(function() { 
jQuery(document).mousemove(function(e) { 
    if (e.clientY <= 5) { 
     jQuery.colorbox({initialHeight: 250, initialWidth: 250, html:'<h2>any custom HTML here</h2><br/><img src="nice-img" />'}); 
    } 
});

}）;

我發現很多使用e.pageY的例子，但是請注意，只有當用戶沒有向下滾動時纔會觸發它。所以如果你向下滾動5像素，e.pageY將不起作用，但e.clientY將工作。 e.pageY給出了抵消，而e.clientY給出絕對座標。很重要！

來源

2014-09-24 19:54:46 user704988

風格化Javascript退出彈出菜單

回答

相關問題