Div 叠加层淡入历史记录，并可使用哈希 URL 添加书签

Question

我创建了一个包含所有项目的作品集页面。这些项目只是带有悬停描述和按钮的图像。我打算在单击其中一个按钮时淡入整个页面的叠加层中，使用唯一的 id 来识别按下的按钮，以便覆盖 JavaScript 知道要为特定项目淡入哪个叠加层。我已经完成了前 2 个项目叠加。

当特定的覆盖层淡入时，我将唯一 id 添加到 url，如下所示：test.com/projects#Unique_Id。当我关闭覆盖层时，我会从 url 中删除 id。我找到了一些 JavaScript，因此当我单击浏览器历史记录后退按钮时，会重新添加哈希 URL，并且覆盖层会再次淡入。我还使用了一个脚本使哈希 url 能够成为书签/直接链接。因此，如果页面重新加载，或者直接访问哈希 URL，则叠加层将淡入。所有这些都是新闻界的。

但是我正在努力将历史记录回淡入和书签淡入，并带有多个叠加层，没有任何干扰。

这是我正在处理的页面：http://www.stuartnorman.co.nf/projects 正如我所说，只有前 2 个项目图像有叠加层。

第一个叠加层也可以与背面和书签一起使用。但是当我尝试第二个叠加层时，单击返回和书签直接链接都会褪色在第一个叠加层而不是第二个叠加层中。我知道这是为什么，但我无法解决这个问题。

我尝试搜索此问题，但找不到。我也尝试了几种解决方法，但它们不起作用。我也尝试使用几个历史插件，但它们不适合我的需求。

因此，请有人为我提供一些代码，让我在历史记录中有多个唯一的叠加层淡入，并为唯一的哈希 id URL 分配正确的叠加层添加书签直接链接。谢谢。

这是我的 JavaScript 覆盖和哈希 id 的东西：

//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;
});

Answer 1

好的，没关系。我已经回答了我自己的问题，哈哈。而不是使用此代码：

//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');
}

我使用了在这里找到的jQuery历史插件：http://tkyk.github.io/jquery-history-plugin虽然它已经停产，但它仍然有效，并且是一段很棒的代码。

这是我使插件工作的新代码：

jQuery(document).ready(function($){
 //If no hash, start the page as normal. You would think you wouldn't need this, but you do.
    $.history.init(function(hash){
        if(hash == "") {
 //If hash = Hidden_Alphabet, then fadeIn .overlay1 and hide the body scroll.        
        } else if (hash == "Hidden_Alphabet") {
          $(".overlay1").fadeIn(500);
          $('body').css('overflow', 'hidden');
        } 
 //If hash = Type_as_Image, then fadeIn .overlay2 and hide the body scroll.
        else { window.location.hash == "Type_as_Image";
            $(".overlay2").fadeIn(500);
            $('body').css('overflow', 'hidden');
        }
    },
//This for some reason is also needed, and breaks the code if it's not there.
    { unescape: ",/" });
}); 

此代码将在单击后退按钮时使叠加层淡入，并且还带有直接书签链接。目前，它仅使用 2 个叠加层。不过我不知道更多。

更新：

要允许 2 个以上的叠加层，而不是使用 else if() 和 else ，您需要使用 if() .这将使多个叠加层起作用，无论有多少叠加层。