dialog要素でつくるモーダルダイアログ
- カテゴリー
- HTML/CSS >
- HTML/CSSの実践
全3回
EdgeのChromium移行やSafari15.4のリリースにより、すべてのブラウザでdialog要素が使えるようになりました。これを使い、モーダルダイアログを実装してみましょう。
最終回 その他のスクリプト制御
dialog要素でモーダルダイアログがひととおり実装できました。今回は、「オーバーレイ背景クリックでも閉じる」「ダイアログ展開中はスクロールを抑止する」を実装して、仕上げていきましょう。
第2回 開閉時のアニメーション
dialog要素を使ったモーダルダイアログに、ボタンによる開閉や見た目のスタイリング行いました。今回は、開閉時のアニメーションをつけていきます。
第1回 基本実装と見た目のカスタマイズ
dialog要素を使って、モーダルダイアログを実装していきます。まずはモーダルの開閉の実装と、CSSによるスタイルの適用を行います。