今更ながら、モーダルを作ってみる | バシャログ。

Oculus Questの予想を超えた性能の良さに感激しつつ、毎晩ライトセーバーを嬉々として振り回し続けている kouraku です。おはこんばんちわ。 さてさて今回は、モーダルを作ってみたいと思います。 これもよくライブラリにお世話になりがちなのですが、CSSでflexを使うのが当たり前になって来た昨今、要素を画面中央に配置することなど、もはや朝飯前。 表示非表示を切り替え、そこにアニメーションをつける程度であれば、わざわざライブラリを使うほどでも無いわけです。 いやむしろ、こだわったデザインや細かな動きなどの注文が来ると、ライブラリを使ったがためにエラく面倒なことをする羽目になることも多々ありますよね。 ということで、できるだけシンプルなモーダルを作りたいと思います（アニメーションは省きます）。 まずはポイントを確認 上記でも軽く触れたとおり、モーダルのコンテンツが画面中央に配置される

[natural90000]

“$(window).scrollTop でモーダルを開く前のスクロール値を取得し、モーダル開閉時に活用 モーダル展開時は、後ろ（元）の画面はスクロールさせない（固定する）”