怎么实现纯 CSS 弹出框？ - CSS 笔记

1
<!DOCTYPE html>
2
<html lang="en">
3

4
<head>
5
  <meta charset="UTF-8">
6
  <title>纯css实现弹窗</title>
7
  <style>
8
    * {
9
      margin: 0;
10
      padding: 0;
11
      font-size: 14px;
12
      font-family: Arial, Helvetica, sans-serif
13
    }
14

15
    .button {
16
      background: bisque;
17
      color: #fff;
18
      padding: 10px 25px;
19
    }
20

21
    .modal>input {
22
      display: none;
23
    }
24

25
    .modal>input~* {
26
      overflow: hidden;
27
      max-height: 0;
28
      opacity: 0
29
    }
30

31
    .modal .overlay {
32
      top: 0;
33
      left: 0;
34
      bottom: 0;
35
      right: 0;
36
      position: fixed;
37
      margin: 0;
38
      border-radius: 0;
39
      background: rgba(17, 17, 17, 0.6);
40
      transition: all 0.3s;
41
      z-index: 100000;
42
    }
43

44
    .modal .overlay~* {
45
      border: 0;
46
      position: fixed;
47
      top: 50%;
48
      left: 50%;
49
      transform: translateX(-50%) translateY(-50%) scale(0.2, 0.2);
50
      z-index: 1000000;
51
      transition: all .3s ease;
52
    }
53

54
    .main {
55
      background: #fff;
56
      padding: 10px;
57
    }
58

59
    .modal>input:checked~* {
60
      display: block;
61
      opacity: 1;
62
      max-height: 10000px;
63
    }
64

65
    .modal>input:checked~.overlay~* {
66
      max-height: 90%;
67
      overflow: auto;
68
      -webkit-transform: translateX(-50%) translateY(-50%) scale(1, 1);
69
      transform: translateX(-50%) translateY(-50%) scale(1, 1);
70
    }
71

72
  </style>
73
</head>
74

75
<body>
76
  <label for="modal_1" class="button">显示模态框</label>
77

78
  <div class="modal">
79
    <input type="checkbox" name="" id="modal_1">
80
    <label for="modal_1" class="overlay"></label>
81
    <div class="main">
82
      <p>
83
        We have a special offer for you. I am sure you will love it! However this does look spammy...
84
      </p>
85
    </div>
86
  </div>
87

88
</body>
89

90
</html>