css - 我在哪里可以找到 MDN 上的纯 CSS 模式示例？

Question

我一直在 Mozilla Developer Network (MDN) 上寻找示例代码。

我曾经偶然发现它，令我惊讶的是，我不知道可以在没有 javascript 的情况下使用纯 CSS 模式。

我现在好像找不到这个例子，我想知道它的链接。

我可以找到其他示例，但我更愿意查看来自 MDN 等信誉良好的来源的代码。

谢谢。

Answer 1

神奇的是 :target 伪选择器。这是来自 MDN 的链接: https://developer.mozilla.org/en-US/docs/Web/CSS/:target

例子:https://mdn.mozillademos.org/files/4607/lightbox.html#

你也可以看看这里: http://www.webdesignerdepot.com/2012/10/creating-a-modal-window-with-html5-and-css3/

我在代码笔中找到了另一个很好的例子: http://codepen.io/maccadb7/pen/nbHEg

.modal:before {
  content: "";
  display: none;
  background: rgba(0, 0, 0, 0.6);
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10;
}
.modal:target:before {
  display: block;
}
.modal:target .modal-dialog {
  -webkit-transform: translate(0, 0);
  -ms-transform: translate(0, 0);
  transform: translate(0, 0);
  top: 20%;
}
.modal-dialog {
  background: #fefefe;
  border: #333333 solid 1px;
  border-radius: 5px;
  margin-left: -200px;
  position: fixed;
  left: 50%;
  top: -100%;
  z-index: 11;
  width: 360px;
  -webkit-transform: translate(0, -500%);
  -ms-transform: translate(0, -500%);
  transform: translate(0, -500%);
  -webkit-transition: -webkit-transform 0.3s ease-out;
  -moz-transition: -moz-transform 0.3s ease-out;
  -o-transition: -o-transform 0.3s ease-out;
  transition: transform 0.3s ease-out;
}