没有 href 的纯 CSS 模态和弹出窗口

Question

我正在寻找完全由 CSS 制作的模式弹出窗口。我什至不需要任何动画，但我希望它有一个半透明的全屏白色背景来遮挡页面。我发现了一些只是搜索，但问题是他们使用 href 标签来打开和关闭弹出窗口 window。所以问题是当你点击链接时，页面会移动到那个 href 标签。

我在这里找到了一个 http://codepen.io/maccadb7/pen/nbHEg 但就像我说的，它使用 href 标签，因此页面移动到那个 href 标签。我在内容很多的长页面上使用这些，所以我需要页面在使用时保持在同一个位置。

也许有一种方法可以使用标签和 ID 代替 'a hrefs'？

我真的需要帮助，提前谢谢你。

Answer 1

据我所知，这是不可能的。 CSS 不是反应式语言，与 javascript 不同，它可以处理来自用户输入的事件。您发现的 CSS-only 解决方案会离开页面，以便页面可以在加载时显示模态。

您链接的 CSS-only 解决方案非常聪明，它与您希望得到的一样接近。抱歉！

Answer 2

我认为目前不可能。

纯 CSS 模式使用 :target 作为对点击做出反应的技巧，因为 CSS 没有事件。

我不知道您可以使用任何其他技巧来替代 :target。

也许可以尝试在不 :target 时固定模式，这样当用户单击时，它不会滚动。我试过了，但是我在 CSS 的技能有限，我试了不到 5 分钟。不过我不确定它是否有效。

Answer 3

您可以使用 CSS 和此处所述的复选框技巧：https://css-tricks.com/the-checkbox-hack/ with an overlay demo shown here: http://codepen.io/Idered/pen/vytkH

如文章和演示中所述，您可以隐藏复选框，附加一个引用复选框 ID 的标签 for。然后点击显示覆盖，否则不会显示。除此之外，您还需要添加过渡以淡化 modal/overlay in/out.

CSS 使其工作的示例：

.modal {
  opacity: 0;
  visibility: hidden;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  text-align: left;
  background: rgba(0,0,0, .9);
  transition: opacity .25s ease;
}    

.modal-state {
  display: none;
}

.modal-state:checked + .modal {
  opacity: 1;
  visibility: visible;
}

HTML:

<label class="btn" for="modal-1">Show me modal with a cat</label>
<input class="modal-state" id="modal-1" type="checkbox" />
<div class="modal">
</div>

Answer 4

实际上 有一个 CSS 技巧可以在没有 href 的情况下构建画廊。问题是在我看来不够优雅，需要隐藏单选框。

但我肯定会选择 "href way"——或者至少我在写 my own pure-CSS slide renderer 时是这样做的……

没有 href 的纯 CSS 模态和弹出窗口

Pure CSS Modal & Popup without href

html

css

modal-dialog

popup