CSSによる上下左右レスポンシブなモーダル
最終更新 2018/12/06

CSSによる上下左右レスポンシブなモーダル

前提として、CSSだけで成立するモーダルではない。 あくまでレスポンシブという点をCSSで実装するだけなので、開いたり閉じたりはJavaScriptを使用する。

上下左右レスポンシブ

昔は、子要素を相対位置に配置(position: absolute;)して、 上下左右をすべて指定(top: 0; right: 0; bottom: 0; left: 0;)して、 自動計算の余白を指定(margin: auto;)する、という方法が主流だったが、 Flexboxの登場により、もっとシンプルに実装できるようになった。

核となる構成は、親要素にdisplay: flex;とjustify-content: center;を、子要素にalign-self: center;を指定すること。 これにより子要素は親要素の上下左右中央に配置される。

内包コンテンツが画面縦幅より長くなる場合もあるので、 超過分はスクロールできるように(overflow-y: auto; height: 100%;)しておく。

フェードもCSSで

モーダルはデフォルトでは見えない状態にしておき(visibility: hidden;)、あわせてフェード用の設定(opacity: 0; transition-duration: .4s;)も指定する。 あとは、開いた状態のclass(たとえば.opening)を用意し、フェード用の設定(visibility: visible; opacity: 1;)を指定すればOK。

その他、ボタンや黒背景のCSS、モーダルのJavaScriptについては、ソースを参照。

デモ