Question

所以我使用CSS：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

（还有一些其他技巧涉及到该代码笔演示 - 将另一个目标添加到模式上的“关闭”按钮，该按钮也是fixed，以防止页面滚动时模态已关闭，将模式的z-index从-1更改为100（或其他适当的大整数）将使其在关闭后立即阻止点击。）< / p>

Answer 2

使用

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

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

Answer 3

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

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

    //do your poppin' up here.
});

Answer 4

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

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

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

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

Answer 5

您是否尝试过css3：焦点选择器？

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

另外

CSS Menu - Keep parent hovered while focus on submenu

您也可以使用<button>代码，然后根据需要设置样式。这会阻止你的页面跳跃，因为它不是一个锚点。

阻止页面跳转：目标选择器

5 个答案: