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

全2回

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

第1回を読む

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

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

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

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