Modal

基礎となる Modal は以下のようになります。

Modal は Dialog を使用しています。 非対応ブラウザ には dialog-polyfill の併用を検討してください。特に Safari 15.4 より古いブラウザが対応してないので、注意してください。

Modal の開閉は、showModal と close を使用してください。こうすることで、モーダル外が不活性になります。また、モーダル外クリックでモーダルを閉じるサンプルコードも用意してあります。

Modal 内部は <form method="dialog"> が利用されています。そのため、type attribute のついてない <button> は全て閉じるボタンになります。<button> に閉じる以外の処理をさせたい場合は、type="button" や type="submit" をつけてください。