このページについて
このページではHTMLで使えるdialogの使い方を解説しています。
dialogタグ
dialogはドキュメント内にダイアログボックスやサブウィンドウなどを定義する機能を持っています。ダイアログボックスとは「ユーザーに何かしらの操作をしてもらうためのアラート/ポップアップ」という感じの定義らしいです。
ちなみにこのタグはSafariでは非対応らしいです。そう見かけることは多くないですし、あまり気にしなくてもいいかもしれませんけど。
dialogタグの書き方
dialogはポップアップ・アラート・モーダルを定義したいところを囲むだけでOKです。
<dialog open>ダイアログボックス</dialog>これをブラウザで表示すると以下のようになります。
ワードプレスの仕様なのかテーマの仕様なのかは不明ですが大きく占有していることがわかります。
dialogタグで使える属性
dialogで使える属性はグローバル属性・イベント属性の他に、open属性が使用できます。
open属性はdialogを最初から開いた状態にするという機能を持っています。オンオフを切り替えるだけの属性なので、書けばオープンとなります。
JavaScriptで動的に変化させる
ここからはオマケです。このdialogのopen属性も、JavaScriptで動的に変更可能です。今回は簡単なサンプルとして、「ボタンをクリックしたら関数を呼び出してopen属性を動的に付与したり撤去したりしてみる」みたいなことを実践してみます。
以下がHTMLとJavaScriptのソースコードのまとめになります。
<button onclick="change()">切り替え</button>
<dialog id="dialog">aaaaaa</dialog>
<script>
function change(){
let opens = document.getElementById('dialog').open;
if (opens == true) {
document.getElementById('dialog').open = false;
}else if (opens == false) {
document.getElementById('dialog').open = true;
}
}
</script>こんな感じのソースコードがあったとします。まずbuttonタグにonclick属性でクリック時に関数を起動するように設定。今回はchange()が起動します。
次にdialogにid属性を付与し、JavaScript側から特定出来るようにします。今回はシンプルにdialogと設定しましたが、なんでもいいです。
最後にJavaScript側。こちらは関数のみを実装します。change()の中身は
- 変数opensを宣言
- if文でopensがtrueなら、falseに切り替え
- もしopensがfalseなら、trueに切り替え
というシンプルなものになります。これをブラウザで実際にやると以下のようになります。
dialogが出たり消えたりすれば、成功です。どこでも使えるので工夫すればもうちょっと色々できそうな気もします。dialogが使われるかは別ですけど。
まとめ
dialogはダイアログボックスを定義するために使用します。あとはJavaScriptで動的にopen属性を付与したり撤去したりすることで開いたり閉じたりさせることもできます。
- HTMLの基礎
- HTMLってどんな言語？書き方やHTMLファイルの作成方法などを解説。
- HTMLタグで押さえておきたいポイント3選
- HTMLタグを使う上で必ず押さえておいてほしいポイント3つの解説です。
- HTMLタグと属性一覧
- HTMLタグと属性の一覧です。
- tableタグ生成ページ
- tableタグの基本形を生成できるページです。
- ulタグ・olタグ生成ページ
- ulタグとolタグの基本形を生成できるページです。