モーダルウインドウの背景を上下にスクロールせず固定する方法 | imasashi.netモーダルウインドウが開いた際に裏のページが上下してしまう問題、CSSだけで固定できないかと試行錯誤したのですが、iOSのSafariでどうしても挙動が安定しなかったので、とうとうJavaScriptで実装することにしました。ちょっと悔しい。 基本的な考え方 背景が固定された状態(position : fixed状態)のスタイルを作っておく モーダルの表示/非表示と、背景固定のオン/オフをJSで連動させる モーダルを表示する際に、現在のスクロール位置をJSで取得してCSSに渡す という感じでがんばります。 HTML モーダルウインドウを開く要素に、例えば class=”modalOpner” とクラスをつけておく モーダルウインドウを閉じる要素に、例えば class=”modalCloser” とクラスをつけておく CSS 背景が固定されている状態のスタイルを定義しておきます。 body.f
