Question

我正在使用一种模态技术，它使用了在聚焦时可以使用不同的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。我通过在我的页面上创建一个带有事件监听器的链接来关注叠加层，该事件监听器执行以下操作：

location.hash = '#overlay';

因此将叠加层置于焦点并使不透明度为1。

问题是，当我关闭模态然后单击浏览器的后退按钮时，它会将我带回my_url＃overlay。

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

Answer 1

当您关闭模态时，您显然正在进行某种路由。因此，您可以使用window.location.replace()删除历史记录堆栈中的当前项目（包含#overlay的项目），而不是您正在执行的操作，将其替换为新项目。

因此，如果您只需要在模态关闭时从网址中删除锚点，您应该能够：

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

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

Answer 2

老实说，如果您已经使用Javascript设置哈希值，那么当:target可见时，为什么还要使用CSS #overlay而不是类呢？

例如

#overlay.show { … }

如果您正在寻找能够使用或不使用Javascript的东西 - 这是值得称赞的但是很棘手 - 那么您需要使用后者来设置类并阻止<a href="#overlay">点击到达地址杆

顺便说一句，如果你单独使用opacity来影响#overlay的可见性，那么我想警告你，虽然看不见它仍会接受鼠标输入。这也会阻止输入到达不可见#overlay下面的元素。

Answer 3

您可以在调出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();
});

如何使用模态使用：焦点属性来避免后退按钮问题

3 个答案: