ブラウザ向けモーダルダイアログに使われるヴェールのサイズ指定方法
はじめに
次のようにブラウザ向けのUIとしてモーダルダイアログが広く使われています。
- https://getbootstrap.com/docs/4.0/components/modal/
- https://semantic-ui.com/modules/modal.html
- https://materializecss.com/modals.html
- https://alertifyjs.com/confirm.html
- https://jqueryui.com/dialog/#modal-confirmation
- https://github.com/d11n/html-veil
例えば次のイメージです。
モーダルダイアログでは、ダイアログの背後にHTML要素を配置し、背後の要素を操作を禁止しています。ここではこの背後の要素をヴェールと呼びます。ヴェールの実装方法を整理します。
上記のリストであげたUIフレームワークはすべて、ヴェールに次のスタイルを指定して、ブラウザ上での位置を固定します。
position: fixed;
top: 0;
left: 0;
ウインドウ全体と同じサイズを設定して背後の要素を隠します。このサイズの指定方法にいくつかの方法があります。JavaScriptとCSSを使う二つの方法が考えられますが、CSSを使う方法が一般的です。CSSを使う理由は、実装が簡単であることとブラウザのリサイズを考慮しなくて良いことです。
CSS
CSSを使う方法には次の三つの指定方法があります。
right: 0; bottom: 0;width: 100%; heigth: 100%;inset: 0;
いろいろなUIフレームワークがどの方法を使っているか分類します。
right: 0; bottom: 0;
最もよく使われているパターンです。
- https://getbootstrap.com/docs/4.0/components/modal/
- https://get.foundation/sites/docs/reveal.html
- https://getuikit.com/docs/modal
- https://shakrmedia.github.io/petal/docs/modals.html
- https://alertifyjs.com/confirm.html
- https://github.com/d11n/html-veil
width: 100%; heigth: 100%;
少数ですが使われています。
inset: 0;
対応ブラウザに制限があるせいか、採用しているUIフレームワークはありませんでした。
inset は CSS のプロパティで、 top, right, bottom, left に対応する一括指定です。
スタイルの効果はright: 0; bottom: 0; と一緒です。
書き方は一番短くて済むのですが、Safariがサポートしていないので、使いどころが難しいです。
その他
ほかにもちょっとずつ違う亜種がありました。
width: 100%; heigth: 120%;
なぜか、height に120%を指定しています。
width: 100%; heigth: 100%; と right: 0; bottom: 0; 両方
両方使っているパターンもありました。
position: abusolute;
position: fixed;ではなくposition: abusolute;です。
JavaScript
JavaScriptでは、次のようにwindowのサイズを動的に取得することが可能です。
el.style.width = `${window.innerWidth}px`
el.style.height = `${window.innerWidth}px`
ブラウザのサイズが変わった際には再度サイズの取得と設定が必要です。特にブラウザのサイズを大きくしたときに、ヴェールの外側の要素が表示され操作可能になる点に注意が必要です。不便なのか、JavaScriptでサイズ指定をするUIフレームワークはありませんでした。
Discussion