HTML標準の<dialog>要素で作るモーダル。フォーカス管理とEscで閉じる挙動はブラウザ任せにでき、JSは開閉の数行だけです。
プレビュー枠は右下をドラッグすると高さを変えられます
書き換えるとプレビューに即反映されます。変更はこのページ内だけで、リロードすると元に戻ります。
<dialog>要素の showModal() で開くと、最前面表示・背面の操作ブロック・Escキーで閉じる・フォーカスの閉じ込めをブラウザが標準で行います。背景の暗幕は ::backdrop 擬似要素でスタイルします。div とJSで自作するより短く、アクセシビリティの抜けも起きにくい実装です。
開くボタンと閉じるボタンはtype="button"にします（form内でsubmit扱いになるのを防ぐ）。閉じるアニメーションを付けたい場合は@starting-styleとtransition-behaviorを検討してください。
HTML標準の<dialog>要素を使ったモーダルダイアログを作ってください。showModal()で開き、::backdropで背景を暗くし、JSは開閉のイベントリスナーだけの最小構成にしてください。