dom_dom0900_003

モーダルウィンドウを開くときは、背景スクロールを抑制するためにdocument.body.style.( A ) = ‘hidden’を設定することがある。閉じるときは( B )イベント(例: ×ボタンや背景クリック)でクラスを外し、スクロールを元に戻す。

解答

A: overflow
B: click

解説

モーダル表示時はoverflow: hiddenで背面のページスクロールを止める。閉じる契機はクリックイベントで背景/クローズボタンを判定して処理するのが基本。

使用例(サンプルコード)

[ html ]

<button id="open">Open</button>
<div id="backdrop" class="hidden">
  <div id="modal" role="dialog" aria-modal="true">
    <button id="close">×</button>
    <p>内容</p>
  </div>
</div>
<style>
.hidden{display:none}
#backdrop{position:fixed;inset:0;display:grid;place-items:center;background:rgba(0,0,0,.4)}
#modal{background:#fff;padding:1rem;border-radius:.5rem;min-width:280px}
</style>
<script>
const bd = document.getElementById('backdrop');
open.onclick = () => { bd.classList.remove('hidden'); document.body.style.overflow='hidden'; }; // (A)
close.onclick = () => { bd.classList.add('hidden'); document.body.style.overflow=''; };
bd.addEventListener('click', (e)=>{ // (B)
  if(e.target === bd) { close.click(); }
});
</script>