html - 在不改变视口(viewport)位置的情况下使用纯 CSS/HTML 弹出 div

标签 html css popup popupwindow

我想要实现的是一个带有纯 CSS 的弹出窗口,即不使用 JavaScript。我想出了一个使用 target 伪类的解决方案,但问题是每当我单击弹出窗口的 close 按钮时,它都会将视口(viewport)滚动到 href 我指定的元素,在本例中为 #home。我想要实现的是无论滚动位置如何,视口(viewport)都不会移动的功能。例如,如果我打开弹出窗口然后滚动到最后一部分,然后单击关闭按钮,视口(viewport)应该停留在最后一部分。

这是 jsFiddle:https://jsfiddle.net/tmzjpwkz/6/

最佳答案

将 href 替换为#popup:target

  <a href="#popup:target">Close</a>

https://jsfiddle.net/tmzjpwkz/8/

关于html - 在不改变视口(viewport)位置的情况下使用纯 CSS/HTML 弹出 div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36462676/

相关文章:

html - 设置元素位置时禁用链接

javascript - 处理弹出窗口关闭的正确方法

jquery - 防止关闭 JQuery 弹出窗口

windows - 有没有办法在 Windows 10 上触发来自 Vala MSYS2 的弹出通知?

html - Sublime Text 2 中关闭 HTML 标签的快捷方式

javascript - 如何使用 JavaScript 从第 1 页的表单获取值到另一个页面?

jquery - 使用 Bootstrap 更改背景和 CSS

javascript - Bootstrap 进度条进度

html - 横幅背景图像屏幕分辨率

jquery - 鼠标移开不适用于所有方向