我创建了一个包含我所有项目的投资组合页面。这些项目只是带有悬停描述和按钮的图像。我打算在单击这些按钮之一时淡入整个页面覆盖，并使用唯一的 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 分配正确的覆盖的书签直接链接。谢谢。
这是我的叠加层和哈希 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;
});