Question

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

我在这里找到了一个http：//codepen.io/maccadb7/pen/nbHEg，但就像我说的那样，它使用了href标签，因此页面移动到那个href标签。我在包含大量内容的长页面上使用这些内容，因此我需要在使用该页面时将其保留在同一位置。

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

我真的可以使用帮助，谢谢你。

Answer 1

您可以使用CSS和复选框黑客，如下所示：https://css-tricks.com/the-checkbox-hack/，其中显示了重叠演示：http://codepen.io/Idered/pen/vytkH

如文章中所述并在演示中显示，您可以隐藏复选框，附上引用复选框ID为for的标签。然后点击显示叠加，否则不显示。除此之外，您还可以添加过渡以淡化模式/叠加/输出。

使其工作的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 2

据我所知，这是不可能的。 CSS不是一种被动语言，不像javascript，它可以处理来自用户输入的事件。您找到的仅限CSS的解决方案离开页面，以便页面可以在加载时显示模态。

您链接的仅限CSS的解决方案非常聪明，而且它与您希望得到的一样接近。遗憾！

Answer 3

我认为目前不可能。

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

我不知道你可以用什么其他技巧来代替:target。

也许可以尝试在不:target时修复模态，因此当用户点击时，它不会滚动。我试图这样做，但我的CSS技能有限，我尝试了不到5分钟。我不确定它会起作用，等等。

Answer 4

实际上有用于构建没有href的图库的CSS技巧。问题是，我认为不优雅，需要隐藏的放射线框。

但我肯定会选择“href方式” - 或者至少我写的是my own pure-CSS slide renderer时所做的...

Pure CSS Modal＆amp;弹出没有href

4 个答案: