お久しぶりです、アンドレです。

IEのサポートが終了してからというもの、HTMLもCSSも比較的新しいもの（仕様）を採用できるようになって、いい時代になりました。

以前はプラグイン／ライブラリを使わないと実装が手間だったものも、少しずつですが標準仕様のもので対応できるようになってきており、アクセシビリティ的にもそのほうがbetterなケースが多い印象です。

そこで今回は、プラグイン／ライブラリを使わずにdialog要素を使ってモーダルを実装してみたので、それをご紹介したいと思います。
正直今更といえば今更なのですが、モーダル表示切り替えの際のガタつきを抑えるところは頑張りました（ただSafariはガタつくかも…）。

コードや詳細な説明はCodePenのほうに書いているので、下記をご確認ください。

See the Pen dialog要素を用いたモーダル実装 by Takamasa Okada (@NP-okada) on CodePen.

基本的には比較的簡単に実装できるのですが、例えばフェードイン／アウトでモーダルを表示させたり、先述の縦スクロールバーの有無によるガタつきを回避しようと思うと

モーダル外縦スクロールあり／なし x モーダル内縦スクロールあり／なし

の計4パターンを考慮して制御しないといけなかったりで、ちょっと大変でした。
（モーダル外縦スクロールあり／なしについては .ly_wrapper でコメントアウトしている height: 200vh の有効／無効で、モーダル内縦スクロールあり／なしについては表示領域のサイズを変えることでご確認いただければと思います）

最初からもう少しこなれた実装になっていれば…というのが正直なところです。
ただ一度作ってしまえばほぼ流用できるはずなので、今後は楽に実装できると思います。

これからも新しいものを適宜取り入れて、よりよいものを作っていきたいです。
それでは、また。