Modal Scale Blur

DEMO

CODE

<div class="demo-stage msb-stage"><button class="msb-open" type="button">OPEN MODAL</button><div class="msb-overlay"><div class="msb-modal"><h3>Modal Title</h3><p>Backdrop blur + 弾性スケールで開きます。</p><button class="msb-close" type="button">CLOSE</button></div></div></div>

.msb-stage { position:relative; display:flex; align-items:center; justify-content:center; padding:3rem; background:#0F0F12; min-height:300px; }
.msb-open, .msb-close { background:#E91B89; border:none; color:#fff; font-family:'Oswald',sans-serif; letter-spacing:.12em; font-size:.78rem; padding:.6rem 1.3rem; cursor:pointer; border-radius:6px; }
.msb-overlay { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; background:rgba(10,10,12,.5); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); opacity:0; pointer-events:none; transition:opacity .3s ease; }
.msb-overlay.open { opacity:1; pointer-events:auto; }
.msb-modal { background:#1A1A1A; border:1px solid rgba(255,255,255,.08); border-radius:16px; padding:2rem; width:min(280px,80%); text-align:center; color:#fff; transform:scale(.85); transition:transform .3s cubic-bezier(.34,1.56,.64,1); }
.msb-overlay.open .msb-modal { transform:scale(1); }
.msb-modal h3 { font-family:'Oswald',sans-serif; margin-bottom:.6rem; }
.msb-modal p { color:#9A9A9A; font-size:.85rem; margin-bottom:1.2rem; }

(function(){
  var ov = document.querySelector('.msb-overlay');
  var op = document.querySelector('.msb-open'), cl = document.querySelector('.msb-close');
  if(!ov || !op || !cl) return;
  op.addEventListener('click', function(){ ov.classList.add('open'); });
  cl.addEventListener('click', function(){ ov.classList.remove('open'); });
  ov.addEventListener('click', function(e){ if(e.target === ov) ov.classList.remove('open'); });
})();

AI PROMPT

背景をぼかしてモーダルが弾性スケールで開くダイアログを作って。オーバーレイに background:rgba(10,10,12,.5) + backdrop-filter:blur(6px)、opacity:0 + pointer-events:none、openクラスで opacity:1。モーダル本体は transform:scale(.85) → open時 scale(1)、transition に cubic-bezier(.34,1.56,.64,1) で弾性。オーバーレイ自身のクリックで閉じる（e.target===overlay）。現代的なモーダルに。

BOOKS · PR · AMAZON

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

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

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