10

所以我有这个使用 CSS :target 选择器弹出的模式。但是，单击时页面会跳转到锚点。我想防止页面跳转到 :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);
}
4

5 回答 5

4

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

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

（该代码笔演示中还涉及其他一些技巧——在模态框上的“关闭”按钮中添加另一个目标，这也可以fixed防止页面在模态框关闭时滚动，并将模态框的从更改z-index为-1（100或其他一些适当大的整数）将防止它在您关闭它后立即阻止点击。）

于 2015-01-06T18:40:51.443 回答
2

采用

<a href="#/">...</a>

为了改变 CSS 中的 :target 选择器但无处可去。片段 #/ 不存在，因此页面不会滚动，但 :target 选择器会更改以影响 CSS 更改。

于 2017-01-14T06:12:16.663 回答
1

尝试停止锚标记的默认操作

$('a').on('click', function(e){
    e.preventDefault();

    //do your poppin' up here.
});
于 2013-04-05T07:35:27.837 回答
0

这实际上与 CSS 无关，它是普通的旧 HTML。

您的链接中有一个哈希 id，它引用页面上的一个元素。单击此类链接时，每个浏览器都会将页面滚动到引用的元素。这是非常标准的行为。

除了不使用这种技术之外，您无法防止这种情况发生。好吧，也许有一种方法可以防止使用 JavaScript 黑魔法滚动，但你不应该这样做。

改用一些 jQuery：http://docs.jquery.com/Tutorials: Basic_Show_and_Hide

于 2013-04-05T07:31:34.113 回答
0

您是否尝试过 css3 :focus 选择器？

https://developer.mozilla.org/en-US/docs/Web/CSS/:focus

还

CSS 菜单 - 在关注子菜单时保持父级悬停

你也可以使用一个<button>标签来代替你喜欢的样式。这将防止您的页面跳转，因为它不是锚点。

于 2013-07-23T03:38:15.310 回答