滚动弹出问题

Question

这就是我要创建的CodePen example

这个想法是弹出窗口应该完全像 Pinterest Link

我遇到的问题是：

• 当你关闭弹出窗口时，页面总是跳到顶部。它应该留在原来的位置
• 弹出窗口已修复，我怎样才能让它像在 Pinterest 上一样移动？我想在顶部留一些间距，当你滚动时，你实际上向上移动了
• 如果您有机会在手机上查看此内容，请这样做。我想让网站响应。如果您在移动版本中查看弹出窗口，则不流畅。这意味着当您滚动并从触摸屏上移动手指时，滚动会立即停止。所以感觉就像你需要用手指向下推内容。它不流动，所以你可以滑动它会慢慢停止

我已经尝试了好几天，但无法理解。欢迎任何帮助:) tnx！

Answer 1

不要像这样为关闭按钮使用锚标记：

<div class="close"><a href="#portfolio">close</a></div>

改为这样做：

<span class="close">Close</span>

不要忘记为.close 类添加cursor:pointer 样式。

您的问题将得到解决。

现在，当您单击 Firefox 上的关闭按钮时，触发弹出窗口的图像会消失，以防万一您尚未检查它。所以，关闭按钮最好不要使用锚标签。我的建议是永远不要使用锚标签作为关闭按钮。

希望这会有所帮助。