エントリーの編集
エントリーの編集は全ユーザーに共通の機能です。
必ずガイドラインを一読の上ご利用ください。
モーダル表示時のスクロールバー調整やオーバレイ表示を極力JavaScriptなしで実装する方法
記事へのコメント0件
- 注目コメント
- 新着コメント
このエントリーにコメントしてみましょう。
注目コメント算出アルゴリズムの一部にLINEヤフー株式会社の「建設的コメント順位付けモデルAPI」を使用しています
- バナー広告なし
- ミュート機能あり
- ダークモード搭載
関連記事
モーダル表示時のスクロールバー調整やオーバレイ表示を極力JavaScriptなしで実装する方法
前提モーダルは<dialog>要素を使用するが、<div>で実装したものでも問題ない。 構図は以下を想定する。 ... 前提モーダルは<dialog>要素を使用するが、<div>で実装したものでも問題ない。 構図は以下を想定する。 <body> <dialog></dialog> <div class="overlay"></div> </body> dialogのスタイル例dialog { position: fixed; isolation: isolate; content-visibility: hidden; } dialog[open] { z-index: 1; padding: 0; border: none; content-visibility: visible; } モーダル表示時のオーバーレイを兄弟セレクタで表示するdialogが開いたときにopen属性が付与される。それを利用してオーバーレイを表示する。 .overlay { position: fixed; inset: 0; z