モーダルウィンドウを開くときは、背景スクロールを抑制するために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>