我正在嘗試解決模態問題。我想要做的是允許用戶點擊瀏覽器的後退按鈕來關閉模式並返回到頁面的原始狀態，這是：無模式。爲了這個目的，我想到了使用HTML 5歷史API。基礎揭示模式和HTML5歷史API操作
我開始試圖追加查詢字符串參數的URL，比如http://...page.html?show_modal=[yes|no]但是我最終離開這個方法，因爲我無法處理所有涉及popstate事件，pageshow事件等我不能」的東西不要讓它工作，它會讓我不知所措。
然後我嘗試了一個更簡單的方法，其中包括一個附加到URL的散列，例如http://...page.html#modal和hashchange事件。這種方法對我來說效果更好，我幾乎擁有它。
當用戶單擊按鈕顯示模式時，他或她可以單擊瀏覽器的後退按鈕，它將關閉模式。此外，之後，用戶可以點擊瀏覽器的前進按鈕，它會再次顯示模式。非常好！用戶也可以直接導航到帶有散列的URL，以直接訪問頁面的這種狀態，以及他或她可以爲頁面的這種狀態添加書籤。它的工作非常整齊，我對結果感到非常滿意。
問題是，它不完全完美。當用戶通過點擊背景，ESC鍵或右上角的X來消除模式時，歷史開始混亂。嘗試一下：點擊按鈕打開模式，然後點擊背景將其解除（看看地址欄中的URL，這裏的第一個問題是沒有移除哈希），然後點擊您的瀏覽器後退按鈕，您會看到它不能正常工作。您將以歷史記錄中的副本結束，並且必須點擊後退按鈕兩次才能轉至上一頁。從UX的角度來看，這是不可取的。有沒有人知道這個解決方案？
我在此提供我的代碼CodePen和這個問題的結尾。我建議在你自己的機器上嘗試它，而不是在Codepen中，所以你可以在URL中查看哈希等。另外，它不能在Codepen Full模式下工作，我不知道爲什麼。
謝謝！
我使用基金會5.2.1
HTML
<div class="row">
<div class="small-12 columns">
<h1>Reveal Modal</h1>
<h2>Manipulation of the browser history for a better UX</h2>
<a class="button radius" href="#" data-reveal-id="sampleModal" id="button">Show Modal...</a>
</div>
</div>
<!-- ############# -->
<!-- MODAL -->
<!-- ############# -->
<div id="sampleModal" class="reveal-modal medium" data-reveal>
<h2>Hi!</h2>
<p>You may think you are on a new page now, but you aren't. Try to click your browser <kbd>Back</kbd> button to dismiss this modal and return to the the page you were viewing.</p>
<a class="close-reveal-modal">×</a>
</div>
的JavaScript
function setModalHash(url, present) {
var a = $('<a>', { href:url })[0]; // http://tutorialzine.com/2013/07/quick-tip-parse-urls/
var newHash = "";
if (present === true) {
newHash = "#modal";
}
// Build the resulting URL
result = a.protocol + "//" + a.hostname + ":" + a.port + a.pathname + a.search + newHash;
return result;
}
$("#button").on('click', function() {
history.pushState(null, null, setModalHash(document.URL, true));
});
$(window).on("hashchange load",function(e) {
// Handling also the load event allows navigation directly to http://host/path/to/file#modal and bookmarking it
if (document.location.hash == "#modal") {
$("#sampleModal").foundation("reveal","open");
}
else {
$("#sampleModal").foundation("reveal","close");
}
});