HTMLだけでモーダルを作る方法

cover-image-dialog-html

こんにちは!

フェノメなの開発担当のレミです!

さて、タイトルを見てHTMLだけでモーダルが作れるの?と思った方は少なくないかもしれないですが、はい、作れます。

完全にHTMLネイティブのモーダルです。

次のような宣言のしかたになります:

<dialog open> 
 表示メッセージはここで設定! 
</dialog>

openにしているとデフォルトで表示状態になっています。

モーダルらしい使い方をする場合は、openをなくし、JSでopenを付け足すようににします。

結局JSを使うのか?

まあ、確かにそうですが、最低限のJSになります。モーダル専用のCSSも多く削減されます。

この<dialog> タグだと、最初から

– 常に画面の中央にあり

– その他のエレメントより上に表示され、

– モーダルの周りのエリアの透明黒なレイヤーがつきます。

これまでは美味しい話ですが、ご推測の通り、ブラウザーサポートはまだです。HTML5.2の新しいエレメントの一つであり、現在では、Google Chromeしか対応していせん。(ただし、Firefoxも対応させるためのpolyfillが存在する)

今すぐプロダクションで使うのには、まだ少し早いかもしれないですが、そんなに遠くない未来には、おそらく一般的な手法になるでしょう。

そんなときのために、今のうちから念頭に置いて、次にモーダルが必要になったら、ブラウザーサポートをもう一度チェックして使ってみましょう!

このブログから情報発信しているUIデザイン専門家集団のホームページ :
フェノメナエンターテインメント株式会社