2023年09月5日(火)
HTMLのdialogタグでダイアログ（モーダル）を実装する方法
Webページでモーダルウィンドウやダイアログ表示を実装する際はJavaScriptのライブラリやプラグイン等を使って組み込むことが多いですが、HTMLのdialogタグを使うととても簡単に実装することができます。
dialogタグを使用することで、ダイアログを表示させたり非表示にしたりするJavaScript動作をブラウザが処理してくれることになるので、アクセシビリティにもよいと言われています。（dialogタグでも表示するための指示はJavaScriptを使用しますが）
IEのサポートも終わり、主要ブラウザでdialog要素がサポートされたことで活用できる機会が増えてきたので実装する方法をいくつかのパターンで紹介してみます。
dialogタグを使ってダイアログ表示
まずは基本的な使用方法として、dialogタグを使った場合のHTMLから。
ダイアログで表示する内容をdialogタグの中に記載し、併せてダイアログを表示するためのボタンと閉じるためのボタンを設置します。
ボタンにはidまたはクラスをつけておきます。
これはHTMLのdialogタグで作られたダイアログです。
ダイアログを閉じる ダイアログを開くdialogタグで書...
0
26
6
15author:
BlackFlag
マークアップエンジニア矢次悟郎さんによる、jQueryをはじめとしたWebサイト制作に役立つで技術やサービスの情報発信ブログ
‹ PREV
よなよなエールのファンイベントから学ぶ！ コミュニティ作りに必要なマインドと満足度を高める工夫
NEXT ›
これでSafariにも実装できる！ スクロールをトリガーにしたアニメーションのポリフィル -Scroll-timeline Polyfill
Ads
マークアップエンジニア矢次悟郎さんによる、jQueryをはじめとしたWebサイト制作に役立つで技術やサービスの情報発信ブログBlackFlagの記事『HTMLのdialogタグでダイアログ（モーダル）を実装する方法』についてまとめています。
この記事は特にjavascript・アニメーション・HTML5について書かれており、 気になるWebデザインの記事やまとめを見つけたら「本文を読む」をクリックすると、記事配信元のBlackFlagで全文を閲覧することができます。RSS Sourceの「このサイトの記事一覧」をクリックするとBlackFlagの記事をまとめて表示することができます。また閲覧数や各SNSのシェア状況を目安に、他の人たちが記事をどのように評価しているのか推測することができます。Webデザインにとって有益な記事をまとめていますので、ぜひリンク先をチェックしてみてください。
