Pure Css Modal Dialog

css

在CSS Tricks上看到利用input checkbox的:checked属性可实现很多有趣的效果。参考网上的资料，使用:checked实现了一个纯css的Modal。

实现的思路很简单:

  1. 使用label将checkbox关联起来并将checkbox隐藏。
  2. 编写一个modal的div，使用css属性使其在窗口的最上层，然后设置display: none。
  3. 设置input:checked时modal的CSS属性。

效果

See the Pen pure css modal by Derek (@zhangdeyu) on CodePen.