└── index.html


/index.html:
--------------------------------------------------------------------------------
 1 | <style>
 2 | .dialog-body {
 3 |   position: absolute; left: 20%; top: 0; width: 60%; height: 60%; padding: 32px;
 4 |   box-shadow: 2px 4px 16px gray; box-sizing: border-box; font-size: 18px; background: white;
 5 | }
 6 | div, .button { transition: transform 0.1s linear, opacity 0.1s linear; }
 7 | .button {
 8 |   position: absolute; right: 0; bottom: 0; width: 120px; height: 48px; margin: 32px;
 9 |   border-radius: 4px; font-size: 32px; background: #4688F1; color: white; cursor: pointer;
10 |   text-align: center; text-decoration: none;line-height: 48px;
11 | }
12 | .check {
13 |   position: absolute; right: 20%; bottom: 40%; width: 120px; height: 48px;
14 |   cursor: pointer; font-size: 0; margin: 32px; z-index: 999; opacity: 0;
15 | }
16 | .check:after {
17 |   content: '';
18 |   position: absolute; right: -32px; bottom: -32px; width: 184px; height: 112px;
19 | }
20 | .check:checked+div, .check+div+div { transform: translate(0, -60vh); opacity: 0; transition-delay: 0s;}
21 | .check+div+div { transform: translate(0, -60vh); opacity: 0; transition-delay: 0s;}
22 | .check+div, .check:checked+div+div { transform: translate(0, 0); opacity: 1;transition-delay: 0.5s }
23 | .check:hover+div .button,.check:hover+div+div .button { opacity: 0.8; }
24 | .check:active+div .button,.check:active+div+div .button { opacity: 0.6; }
25 | </style>
26 | <input type=checkbox href='#' class='check'></input>
27 | <div class='dialog-body'>
28 |   ババババ<br>
29 |   しゅっしゅっ<br>
30 |   何回OK押しても無駄ですよー
31 |   <div class=button>OK</div>
32 | </div>
33 | <div class='dialog-body'>
34 |   ババババ<br>
35 |   しゅっしゅっ<br>
36 |   タブを閉じないとダメですよー
37 |   <div class=button>OK</div>
38 | </div>
39 | javascriptを使用していません
40 | 


--------------------------------------------------------------------------------