Modal Fade

DEMO

CODE

<div class="demo-stage md-stage"><button class="md-open" id="mdOpen">OPEN MODAL</button><div class="md-overlay" id="mdOverlay"><div class="md-box"><h3>MOTION LAB</h3><p>背景がフェードし、ダイアログがふわっとスケールインするモーダルです。</p><button class="md-close" id="mdClose">CLOSE</button></div></div></div>

.md-stage { display:flex; align-items:center; justify-content:center; padding:3rem; }
.md-open { padding:1rem 2.5rem; background:#1A1A1A; color:#fff; border:none; font-family:'Oswald',sans-serif; letter-spacing:.2em; cursor:pointer; border-radius:6px; }
.md-overlay { position:absolute; inset:0; background:rgba(26,26,26,.62); display:flex; align-items:center; justify-content:center; opacity:0; pointer-events:none; transition:opacity .3s ease; z-index:10; }
.md-overlay.show { opacity:1; pointer-events:auto; }
.md-box { background:#fff; border-radius:16px; padding:2.5rem; max-width:320px; margin:1.5rem; text-align:center; transform:scale(.8) translateY(20px); transition:transform .35s cubic-bezier(.34,1.56,.64,1); }
.md-overlay.show .md-box { transform:scale(1) translateY(0); }
.md-box h3 { font-family:'Oswald',sans-serif; font-size:1.5rem; letter-spacing:.1em; margin-bottom:.7rem; color:#1A1A1A; }
.md-box p { font-size:.86rem; color:#5A5A5A; line-height:1.7; margin-bottom:1.5rem; }
.md-close { padding:.6rem 1.8rem; background:#E91B89; color:#fff; border:none; font-family:'Oswald',sans-serif; letter-spacing:.15em; cursor:pointer; border-radius:6px; }

const mdOverlay = document.getElementById('mdOverlay');
document.getElementById('mdOpen').addEventListener('click', function(){ mdOverlay.classList.add('show'); });
document.getElementById('mdClose').addEventListener('click', function(){ mdOverlay.classList.remove('show'); });
mdOverlay.addEventListener('click', function(e){ if (e.target === mdOverlay) mdOverlay.classList.remove('show'); });

AI PROMPT

フェード＋スケールインのモーダルを作って。オーバーレイはposition:fixed(デモ内ではabsolute) inset:0、初期opacity:0+pointer-events:none、showクラスでopacity:1。ダイアログは初期transform:scale(.8) translateY(20px)、show時にscale(1)へcubic-bezier(.34,1.56,.64,1)で弾みイン. オーバーレイ余白クリックとCLOSEボタンで閉じる。

BOOKS · PR · AMAZON

※当サイトはAmazonアソシエイトプログラムの参加者です。リンクから商品をご購入いただくと、当方に紹介料が発生します。

学びを止めない · AMAZONサブスク

※当サイトはAmazonアソシエイトプログラムの参加者です。リンクから商品をご購入いただくと、当方に紹介料が発生します。