dialog要素でつくるモーダルダイアログ

全3回

EdgeのChromium移行やSafari15.4のリリースにより、すべてのブラウザでdialog要素が使えるようになりました。これを使い、モーダルダイアログを実装してみましょう。

最終回 その他のスクリプト制御

dialog要素でモーダルダイアログがひととおり実装できました。今回は、「オーバーレイ背景クリックでも閉じる」「ダイアログ展開中はスクロールを抑止する」を実装して、仕上げていきましょう。

第2回 開閉時のアニメーション

dialog要素を使ったモーダルダイアログに、ボタンによる開閉や見た目のスタイリング行いました。今回は、開閉時のアニメーションをつけていきます。

第1回 基本実装と見た目のカスタマイズ

dialog要素を使って、モーダルダイアログを実装していきます。まずはモーダルの開閉の実装と、CSSによるスタイルの適用を行います。