javascript - Div オーバーレイは履歴にフェードインし、ハッシュ URL でブックマーク可能

Question

すべてのプロジェクトを掲載したポートフォリオ ページを作成しました。これらのプロジェクトは、ホバーの説明とボタンが付いた単なる画像です。これらのボタンのいずれかをクリックすると、ページ全体のオーバーレイをフェードインするつもりです。どのボタンが押されたかを識別する一意の ID を使用して、オーバーレイ JavaScript が特定のプロジェクトでどのオーバーレイをフェードインするかを認識します。最初の 2 つのプロジェクト オーバーレイは既に完了しています。

特定のオーバーレイがフェード インしたら、test.com/projects#Unique_Id のように一意の ID を URL に追加します。オーバーレイを閉じると、URL から ID が削除されます。ブラウザー履歴の戻るボタンをクリックすると、ハッシュ URL が再追加され、オーバーレイが再びフェードインするように、いくつかの JavaScript を見つけました。また、スクリプトを使用して、ハッシュ URL をブックマーク/直接リンクにできるようにしました。したがって、ページがリロードされるか、ハッシュ URL が直接アクセスされると、オーバーレイがフェードインします。これはすべて、プレスまで機能します。

しかし、干渉することなく複数のオーバーレイを使用して履歴をフェードインし、フェードインをブックマークするのに苦労しています。

ここに私が取り組んでいるページがあります: http://www.stuartnorman.co.nf/projects最初の 2 つのプロジェクト画像だけがオーバーレイを持っていると言います。

最初のオーバーレイは、バックとブックマークでも問題なく機能します。しかし、2番目のオーバーレイを試すと、戻るをクリックして直接リンクをブックマークすると、2番目ではなく1番目のオーバーレイでフェードインします。これがなぜなのかはわかっていますが、それを回避することはできません。

この問題を検索しようとしましたが、見つかりません。私もいくつかの回避策を試しましたが、うまくいきません。また、いくつかの履歴プラグインを使用してみましたが、私のニーズには合いません。

そのため、履歴に複数の一意のオーバーレイをフェードインさせ、正しいオーバーレイを一意のハッシュ ID URL に割り当てるダイレクト リンクをブックマークできるようにするコードを提供してください。ありがとう。

オーバーレイとハッシュ ID に関する私の JavaScript は次のとおりです。

//Overlay1 fadeIn on click with url hash id
$("#overlay1").click(function(event) {
    event.preventDefault();
    window.location.hash = this.hash;
    $(".overlay1").fadeIn(500);
    return false;
});
//Doesn't allow invisible clicks through to the parent div (stops overlay fadeOut with invisible clicking)
$('.innerContainer').click(function(e) {
  e.stopImmediatePropagation();
});
//Overlays fadeOut on click of the overlay div or the close button and completely removes the hash id from url
$(".close, .overlay1, .overlay2").click(function(event) {
    event.preventDefault();
    var isMSIE = /*@cc_on!@*/0;

if (isMSIE) { // IE-specific
  window.location.hash = ''; // for older browsers, leaves a # behind
} else { // non-IE
  history.pushState('', document.title, window.location.pathname); // deletes the #
}
    event.preventDefault();
    $(".overlay1, .overlay2").fadeOut(500);
});
//On history back, display the last hash id url, fadeIn overlay and hide body scroller
if (("onhashchange" in window) && !($.browser.msie)) {
        window.onhashchange = function () {
              $(".overlay1").fadeIn(500);
              $('body')
            .css('overflow', 'hidden');
         }
         }
//If a hash id is present in url, when refresh or bookmark link, allow the Overlay to fadeIn and hide body scroller         
if(window.location.hash) {
  $(".overlay1").fadeIn(500); 
        $('body')
            .css('overflow', 'hidden');
}
//Hides body scroller on click of overlay buttons
$(function() {
    $('#overlay1, #overlay2').click(function() {
        $('body')
            .css('overflow', 'hidden');
    });
//Shows body scroller on click of overlay close button or the body.
    $('body, .close').click(function() {
        $('body')
            .css('overflow', 'visible');
    });
});
//Overlay1 fadeIn on click with url hash id
$("#overlay2").click(function(event) {
    event.preventDefault();
    window.location.hash = this.hash;
    $(".overlay2").fadeIn(500);
    return false;
});