Javascript 如何使用：focus属性避免模态返回按钮问题

我使用的是一种模态技术，它利用了一个事实，即在聚焦时可以使用不同的css规则：

#overlay {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: rgba(0, 0, 0, 0.8);
    z-index: 99999;
    opacity:0;
    -webkit-transition: opacity 400ms ease-in;
    -moz-transition: opacity 400ms ease-in;
    transition: opacity 400ms ease-in; 
    pointer-events: none;

}
#overlay:target {
    opacity:1;
    pointer-events: auto;
}

其中#overlay是一个div。我通过在我的页面上有一个带有事件侦听器的链接来聚焦overlay，该事件侦听器执行以下操作：

location.hash = '#overlay';

因此，将覆盖设置为焦点，并使不透明度为1

---

问题是，当我关闭模式，然后单击浏览器的“后退”按钮时，它会将我带回我的“url”覆盖

---

在仍然使用location.hash技术打开模式时，有没有办法避免这种情况？

当您关闭模式时，显然是在进行某种路由。因此，您可以使用

window.location.replace（）

来删除历史堆栈中的当前项（包含

#overlay

的项），而不是执行任何操作，将其替换为新项

因此，如果您只需要在模式关闭时从url中删除锚，您应该能够执行以下操作：

location.replace(location.href.replace('#overlay', ''));

---

并且包含锚的url将从浏览器历史记录中消失。

当您关闭modal时，您显然正在进行某种路由。因此，您可以使用

window.location.replace（）

来删除历史堆栈中的当前项（包含

#overlay

的项），而不是执行任何操作，将其替换为新项

因此，如果您只需要在模式关闭时从url中删除锚，您应该能够执行以下操作：

location.replace(location.href.replace('#overlay', ''));

---

而且包含锚定的url将从浏览器历史记录中消失。

老实说，如果您已经在使用Javascript设置哈希，为什么还要在可见覆盖时使用CSS

：target

而不是类呢

例如

如果您想要使用或不使用Javascript，这是值得称赞的，但很棘手，那么您需要使用后者来设置一个类并防止

点击到达地址栏

---

---

另一方面，如果您单独使用

不透明度

来影响

#overlay

的可见性，那么我想警告您，虽然不可见，但仍需要鼠标输入。这还可以防止输入到达不可见的覆盖层下的元素。老实说，如果您已经在使用Javascript设置哈希，为什么还要在可见覆盖层时使用CSS

：target

而不是类呢

例如

如果您想要使用或不使用Javascript，这是值得称赞的，但很棘手，那么您需要使用后者来设置一个类并防止

点击到达地址栏

---

---

另一方面，如果您单独使用

不透明度

来影响

#overlay

的可见性，那么我想警告您，虽然不可见，但仍需要鼠标输入。这还可以防止输入到达不可见的覆盖层下方的元素。您可以在“关闭”链接上使用一个单击处理程序，调用

history.back（）而不是遵循
#
链接

// show overlay
document.getElementById('showOverlay').addEventListener('click',function(e) {
  location.hash = '#overlay';
  e.preventDefault();
});
// hide overlay
document.getElementById('closeOverlay').addEventListener('click',function(e) {
  history.back();
  e.preventDefault();
});

您可以在“close”链接上使用一个单击处理程序来调用
history.back（）而不是遵循
#
链接

// show overlay
document.getElementById('showOverlay').addEventListener('click',function(e) {
  location.hash = '#overlay';
  e.preventDefault();
});
// hide overlay
document.getElementById('closeOverlay').addEventListener('click',function(e) {
  history.back();
  e.preventDefault();
});

“问题是，当我关闭模式，然后单击浏览器的“后退”按钮时，它会将我带回我的“url覆盖”——这不应该发生。它应该会带你回到“我的url”。你能解释一下为什么如果你点击“后退”，URL仍然有“#覆盖”？它仍然没有覆盖。当我关闭模式时，url变成“我的url”。然后我点击后退，当我关闭模式时，我得到“我的url覆盖”，然后url变成“我的url”-这是怎么发生的？@MichaelCoker很抱歉不清楚：它变成了“我的url”，因为我有一个href=“#”的链接来关闭模式。“问题是，当我关闭模式，然后单击浏览器的“后退”按钮时，它会将我带回我的“url覆盖”——这不应该发生。它只会将你带回“我的url”。你能解释一下为什么如果你点击“后退”，url仍然有“覆盖”？它仍然没有覆盖。当我关闭模式时，url就会变成“我的url”“。然后单击“上一步”，当我关闭模式时，我会得到“我的url覆盖”，然后url会变成“我的url”-这是怎么发生的？@MichaelCoker很抱歉不清楚：它会变成“我的url”，因为我有一个href=“#”的链接来关闭模式。谢谢。这确实有效，但会导致刷新，这有点烦人。谢谢。这确实有效，但会导致刷新，这有点烦人。谢谢。这也很有效，就像@bowhart的解决方案一样，尽管我认为我将只使用一个类而不是：target规则来避免刷新页面。@user3494047 np。这会导致页面刷新吗？不应该，嗯，我明白了。没有。我在浏览器的控制台中测试了它（只是运行history.back（）），它刷新了，所以我认为当url中也有一个#时，它会刷新。我看不出来。谢谢，谢谢。这也很有效，就像@bowhart的解决方案一样，尽管我认为我将只使用一个类而不是：target规则来避免刷新页面。@user3494047 np。这会导致页面刷新吗？不应该，嗯，我明白了。没有。我在浏览器的控制台中测试了它（只是运行history.back（）），它刷新了，所以我认为当url中也有一个#时，它会刷新。我看不出来。谢谢