Question

我一直在寻找Mozilla Developer Network（MDN）上的示例代码。

我曾经偶然发现它并且令我惊讶的是，我不知道有没有可能只有CSS的模式没有javascript。

我现在似乎无法找到这个例子，我希望得到它的链接。

我可以找到其他示例，但我更愿意查看来自信誉良好的来源（如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;
}

我在哪里可以找到MDN上仅限CSS的Modal示例？

1 个答案: