テストモードで外部公開したい時に、リダイレクトした時に「テストモードでの運営中になります！」みたいなものを表示したくはないでしょうか？ヒロヤンも色々試行錯誤したりで、できるようになったので書いてみる事にしました。
コンテンツ
html
ここでの肝は、input タグの cheked になります。
|
1 2 3 4 5 6 7 8 9 10 |
<div class="popup_wrap"> <input id="tigger" type="checkbox" checked> <div class="popup_overlay"> <label for="trigger" class="popup_trigger"> <div class="popup_content"> <label for="trigger" class="close-btn">x</label> <p>テストモードでの運営中になります！</p> </div> </div> </div> |
CSS
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 |
start popup .popup_wrap input { display: none; } .popup_overlay { display: flex; justify-content: center; overflow: auto; position: fixed; top: 0; left: 0; z-index: 9999; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.7); opacity: 0; transition: opacity 0.5s, transform 0s 0.5s; transform: scale(0); } .popup_trigger { position: absolute; width: 100%; height: 100%; } .popup_content { position: relative; align-self: center; width: 90%; max-width: 800px; padding: 30px 30px 15px; box-sizing: border-box; background: #fff; line-height: 1.4em; transition: 0.5s; } .close_btn { position: absolute; top: 14px; right: 16px; font-size: 30px; cursor: pointer; } .popup_wrap input:checked ~ .popup_overlay { opacity: 1; transform: scale(1); transition: opacity 0.5s; } finish popup |
実行結果
こんな感じで、画面をリダイレクトすると同時に、下記表示されました！
コメントを残す