Webサイトでよく使うであろうダイアログについて、htmlタグだけで再現できるようになったので、今更ながら使ってみました。
dialogタグを使ってモーダルを実装した際に開く方法として、show()とshowModal()の二種類があります。その違いについて、知らずに今まで使っていたのですが、改めて調べてみたら用途が違いそうだったので、解説しようと思います。
show()を使ってモーダルを開く
show()でモーダルを開いた際には、他の要素を操作することができます。開いた上で、それ以外のテキストエリアやボタンの要素の操作ができます。モーダルを閉じるトリガーがモーダル内にないときはshow()を使うことで実装することができます。
showModal()を使ってモーダルを開く
showModal()でモーダルを開いた際には、モーダル外の要素にアクセスすることができなくなります。モーダルを開いた際に他の要素を操作されたくない際は、showModal()を使うと良さそうです。
ソースコード
違いをわかりやすくするために、ボタンを二つと、テキストエリアを設置しました。モーダルを開いた上で、テキストエリアに入力してみると違いがわかるかと思います。
まとめ
ボタンはどちらでも、モーダルが開きますが、昨日が全然違います。dialogタグ自体は使い勝手がとても良いので、役割をしっかりと理解した上で、使い分けて実装してみてください。
