ブラウザ向けモーダルダイアログに使われるヴェールのサイズ指定方法

はじめに

次のようにブラウザ向けの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を使う方法には次の三つの指定方法があります。

1. right: 0; bottom: 0;
2. width: 100%; heigth: 100%;
3. 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%;

少数ですが使われています。

• https://semantic-ui.com/modules/modal.html
• https://jqueryui.com/dialog/#modal-confirmation

inset: 0;

対応ブラウザに制限があるせいか、採用しているUIフレームワークはありませんでした。

https://developer.mozilla.org/ja/docs/Web/CSS/inset

inset は CSS のプロパティで、 top, right, bottom, left に対応する一括指定です。

スタイルの効果はright: 0; bottom: 0; と一緒です。
書き方は一番短くて済むのですが、Safariがサポートしていないので、使いどころが難しいです。

その他

ほかにもちょっとずつ違う亜種がありました。

width: 100%; heigth: 120%;

• https://materializecss.com/modals.html

なぜか、height に120%を指定しています。

width: 100%; heigth: 100%; と right: 0; bottom: 0; 両方

• http://ink.sapo.pt/javascript-ui/#InkUIModal_1

両方使っているパターンもありました。

position: abusolute;

• https://bulma.io/documentation/components/modal/

position: fixed;ではなくposition: abusolute;です。

JavaScript

JavaScriptでは、次のようにwindowのサイズを動的に取得することが可能です。

el.style.width = `${window.innerWidth}px`
el.style.height = `${window.innerWidth}px`

ブラウザのサイズが変わった際には再度サイズの取得と設定が必要です。特にブラウザのサイズを大きくしたときに、ヴェールの外側の要素が表示され操作可能になる点に注意が必要です。不便なのか、JavaScriptでサイズ指定をするUIフレームワークはありませんでした。