Css 防止从以下位置跳转页面：目标选择器

因此，我使用CSS:target选择器弹出了这个模式。但是，当单击时，页面会跳转到定位点。我想防止页面跳转到：目标选择器。我该怎么做

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

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

---

这与CSS没有任何关系，实际上，它是简单的旧HTML

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

除非不使用此技术，否则无法防止这种情况。嗯，也许有一种方法可以防止JavaScript黑魔法滚动，但你不应该这样做

---

改用jQuery：

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

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

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

---

你试过css3：焦点选择器吗

也

---

您也可以使用

标记，并根据自己的喜好设置样式。这将防止您的页面跳转，因为它不是锚。

使

.modalDialog

位置：固定的
而不是绝对的
。这将使它始终位于当前滚动页面的位置

一个更完整的示例：

（codepen演示中还涉及到一些其他技巧——在模式上的“关闭”按钮中添加另一个目标，该按钮也是固定的，可以防止模式关闭时页面滚动，并将模式的
z-index
从
-1
更改为
100
（或其他适当大的整数）在您关闭它之后，它将不会阻止单击。）
使用

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



为了改变：CSS中的目标选择器，但无处可去。片段#/不存在，因此页面不会滚动，但：target选择器将更改以影响CSS更改。
锚定的整个要点是允许您跳转到页面的特定部分-如果浏览器必须滚动才能到达它，它将滚动。听起来好像
：target
不是您尝试执行的正确选择。我不清楚在这种情况下如何使用
：focus
而不是
：target
。虽然可以显示模式对话框，但只要与对话框中的某个内容交互，焦点将移动，对话框将消失。实际上，如果
：target
选择器要显示
。modalDialog
，
preventDefault
也会阻止该操作！！！只有在jQuery中显示模态的逻辑在概念上是不正确的情况下，这才有效。“其他诡计”才是天才。非JS模式上的页面滚动对我来说是一个破坏者——但这个修复是完美的。做得好！作为解决方案，应检查这一点
<a href="#/">...</a>