htmlのdialogのshowをshowModalの違い

Webサイトでよく使うであろうダイアログについて、htmlタグだけで再現できるようになったので、今更ながら使ってみました。

dialogタグを使ってモーダルを実装した際に開く方法として、show()とshowModal()の二種類があります。その違いについて、知らずに今まで使っていたのですが、改めて調べてみたら用途が違いそうだったので、解説しようと思います。

スポンサーリンク

show()を使ってモーダルを開く

show()でモーダルを開いた際には、他の要素を操作することができます。開いた上で、それ以外のテキストエリアやボタンの要素の操作ができます。モーダルを閉じるトリガーがモーダル内にないときはshow()を使うことで実装することができます。

showModal()を使ってモーダルを開く

showModal()でモーダルを開いた際には、モーダル外の要素にアクセスすることができなくなります。モーダルを開いた際に他の要素を操作されたくない際は、showModal()を使うと良さそうです。

ソースコード

違いをわかりやすくするために、ボタンを二つと、テキストエリアを設置しました。モーダルを開いた上で、テキストエリアに入力してみると違いがわかるかと思います。

まとめ

ボタンはどちらでも、モーダルが開きますが、昨日が全然違います。dialogタグ自体は使い勝手がとても良いので、役割をしっかりと理解した上で、使い分けて実装してみてください。

コメント