1
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

モーダルのお話

Last updated at Posted at 2024-06-05

HTMLとCSSだけでモーダルが作れるようになったらしい。

フロントエンドになってはや数年、自作やらプラグインやらで対応してきた私には「本当ですか…?(疑い)」という気持ち。
実際に打って自分で見て試すことにしました。

…動く! えっすごい
背景を固定したいだとか、そういうのも実装したいとなるとJSが必要ですが、
基本形はHTML + CSS で十分対応できます。
モーダルをスクロールしてるのに、下のページがスクロールされて困る場合は、
[popover]に対して overscroll-behavior を設定すれば、そのモーダル内のものだけスクロールができるように調節できます。モーダルがないところにカーソルを置いてスクロールすると背景がスクロールされます、固定化がされるわけではないです。

popover の値を変更すると閉じるボタン以外で閉じられないようにすることもできるし、背景もちゃんと設定できます。

本気でこれからはこれでモーダルを実装してもいいのでは…?という感じです。
ただ、最近主要ブラウザで使えるようになっただけであり、
古いものだと対応していないので使う案件等は選ぶ必要があります。

しかし、JS必須だったときよりも導入もしやすく時間もその分減っているので、
技術の進歩(?)って目覚ましいな〜と思います。

参考

https://developer.mozilla.org/ja/docs/Web/HTML/Global_attributes/popover
https://developer.mozilla.org/ja/docs/Web/CSS/overscroll-behavior
https://www.gaji.jp/blog/2024/02/16/18434/

1
1
2

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?