css - 防止从:target selector跳转页面

Question

所以我有这个使用 CSS :target 选择器弹出的模式。但是，单击时页面会跳转到 anchor 。我想阻止页面跳转到 :target 选择器。我该怎么做？

<a href="#openModal">Info</a>

<div id="openModal" class="modalDialog">

CSS:

.modalDialog {
    position: absolute;
    pointer-events: none;
    z-index: 99999;
opacity:0;
}

.modalDialog:target {
    opacity:1;
    pointer-events: auto;
}

.modalDialog > div {
    width: 900px;
    height: 506px;
    position: relative;
    background: rgba(0,0,0,0.9);
}

Answer 1

使 .modalDialog position: fixed 而不是 absolute。这将导致它始终位于页面当前滚动的任何位置。

一个更完整的例子:http://codepen.io/mblase75/pen/xbRNeV

(该 codepen 演示中还涉及一些其他技巧——将另一个目标添加到模式上的“关闭”按钮，该按钮也是 fixed 以防止页面在模式关闭时滚动，并且将模式的 z-index 从 -1 更改为 100 (或其他一些合适的大整数)将防止它在之后立即阻止点击你关闭它。)