HTMLでモーダルUIを作るときに気をつけたいこと - ICS MEDIA
2022/06/23 21:32
misarine3
気軽にモーダル指定してくるデザイナーさんに100回読んでほしい。その挙動は本当に必要ですかと。
2022/06/23 21:59
emj1025
iOS safari勘弁してほしい
2022/06/23 22:17
fujibay1975
モーダルはなるべく使わないほうが良い。
2022/06/23 23:19
lnimroder
モーダル実装、alert()とかconfirm()みたいにブラウザ側の機能できないのかなこれ
2022/06/23 23:57
kvx
フォーカスループ作ったな？じゃあ次はモーダルinモーダルの対処な。モーダル内のツールチップのESCキー対応もな。/全部ブラウザの機能でどうにかするべき。
2022/06/24 00:59
mayumayu_nimolove
もうダルいから全部ライブラリでいいと思う
2022/06/24 01:16
manaplus
モーダル実装、もうダルぅー
2022/06/24 01:21
Cherenkov
ライブラリ使えー
2022/06/24 04:15
nicht-sein
Safariが現代のIEと化しているのがよくわかる話だなぁ
2022/06/24 05:08
eos2323
モーダルは一見かっこいいけど、使うほどUXも保守性も下げてる気がしてならない
2022/06/24 06:48
matarillo
原則は「HTMLでモーダルUIを作るな」なんだということを最初にでかでかと書くべき事案。もし<dialog>を使うなら、スクロール停止だのなんだの余計なことをせず、各ブラウザの挙動差も無視すること。
2022/06/24 07:01
strawberryhunter
まあSafariが多少おかしいのはこの際無視するよね。
2022/06/24 08:02
tofu-kun
難しいよな
2022/06/24 08:27
nebos
“「スクロールの制御」「フォーカスの制御」の両方をケアしないと良いモーダルUIの挙動にはなりません”
2022/06/24 08:36
shields-pikes
こんな原始的な実装をしてるのは自分達だけなのでは？もっと楽な方法があるのでは？疑惑が払拭されてよかった。とはいえ、ページ遷移させずにひとつのコンテンツだけに集中してほしいタイミングってあるからなー。
2022/06/24 08:53
circled
escキーで閉じない。全部キーボード操作だけで完結出来ない。アクセシビリティ(目の見えない人用に読み上げ機能でスムーズに動作するか？とか)が下がるか、そもそも無い。みたいなハードルがどんどん上がる昨今。
2022/06/24 09:06
eartht
まぁ自作はしたくないわなー、ライブラリが良い。けど、その選定も大変。地味にedge対応って書かれたモーダルが少なかったりして、客の要望を満たさなかったりする。ｷｰ！
2022/06/24 09:06
securecat
dialogで実装してiOS Safariに関してはSafariの頑張りに委ねるで良いと思う。設計側としては、モーダル外の操作によって主動線が失敗しても致命傷にならない時に限りモーダルを使う。というかそもそもモーダルを使わない。
2022/06/24 09:12
enemyoffreedom
「2022年現在は<dialog>要素を使いつつ、iOS Safariのスクロール対策は自前のJavaScript実装がよさそうです」 何だかんだ面倒くさいのでFW・ライブラリに頼りたいところ
2022/06/24 10:36
miruto
わかるー。モーダル作るの面倒くさいんだよね😇
2022/06/24 11:14
nelpesica
[]
2022/06/24 11:28
send
iOS Safari 15.4 以降だと scroll-behavior 使えるので、それでいいのでは
2022/06/24 11:50
nakag0711
モーダルはUX上百害あって一理なし。はてブアプリからTwitter開いた時とかもう…
2022/06/24 12:44
ultimatebreak
モーダルはマジでめんどくさい
2022/06/24 13:58
buhoho
<dialog>便利だなー
2022/06/24 16:00
spark7
<dialog>以外の方法はバッドノウハウになりそうね。手間ばかりかかってろくなことない。/ iOS Safariは新しいIEな感じ。
2022/06/24 16:23
tockri
昔window.showModalDialog()というAPIがあってな…ヨボヨボ