webコラム 2021年1月29日

【CSS】モーダルウィンドウをコードで簡単に実装する方法

Contents

モーダルウィンドウ（ポップアップウィンドウ）の実装はついついプラグインに頼りがちですが、そういったものに頼らずに実装するケースもあります。

その度に一からコーディングするのも少し手間なので自分用も兼ねてプレーンなモーダルウィンドウのコードを残しておきます。

プレーンなモーダルウィンドウサンプル

モーダルにも色々な仕様があるので実際は仕様に合わせたカスタマイズが必要になると思いますが、本当にプレーンなもので良ければこちらのコードで実装ができます。

コンテンツ量によっては、モーダル内スクロールが必要となるケースもあるかと思います。

簡単に実装をするなら下記二行をCSS「modalWrapper」クラスに追記するだけで可能です。

.modalWrapper {
 ...
  height : 50%; //お好みの高さで固定
  overflow : auto; //状況に応じて縦スクロールバーが出現
...
}

これで↑のGIFアニメのような挙動になるかと思います。

よろしければ参考にしてみて下さい。