こんにちは！
フェノメなの開発担当のレミです！
さて、タイトルを見てHTMLだけでモーダルが作れるの？と思った方は少なくないかもしれないですが、はい、作れます。
完全にHTMLネイティブのモーダルです。
次のような宣言のしかたになります：
<dialog open> 表示メッセージはここで設定！ </dialog>
openにしているとデフォルトで表示状態になっています。
モーダルらしい使い方をする場合は、openをなくし、JSでopenを付け足すようににします。
結局JSを使うのか？
まあ、確かにそうですが、最低限のJSになります。モーダル専用のCSSも多く削減されます。
この<dialog> タグだと、最初から
– 常に画面の中央にあり
– その他のエレメントより上に表示され、
– モーダルの周りのエリアの透明黒なレイヤーがつきます。
これまでは美味しい話ですが、ご推測の通り、ブラウザーサポートはまだです。HTML5.2の新しいエレメントの一つであり、現在では、Google Chromeしか対応していせん。(ただし、Firefoxも対応させるためのpolyfillが存在する)
今すぐプロダクションで使うのには、まだ少し早いかもしれないですが、そんなに遠くない未来には、おそらく一般的な手法になるでしょう。
そんなときのために、今のうちから念頭に置いて、次にモーダルが必要になったら、ブラウザーサポートをもう一度チェックして使ってみましょう！