モーダルウインドウが開いた際に裏のページが上下してしまう問題、CSSだけで固定できないかと試行錯誤したのですが、iOSのSafariでどうしても挙動が安定しなかったので、とうとうJavaScriptで実装することにしました。ちょっと悔しい。 基本的な考え方 背景が固定された状態(position : fixed状態)のスタイルを作っておく モーダルの表示/非表示と、背景固定のオン/オフをJSで連動させる モーダルを表示する際に、現在のスクロール位置をJSで取得してCSSに渡す という感じでがんばります。 HTML モーダルウインドウを開く要素に、例えば class=”modalOpner” とクラスをつけておく モーダルウインドウを閉じる要素に、例えば class=”modalCloser” とクラスをつけておく CSS 背景が固定されている状態のスタイルを定義しておきます。 body.f
![モーダルウインドウの背景を上下にスクロールせず固定する方法 | imasashi.net](https://cdn-ak-scissors.b.st-hatena.com/image/square/17dc1b36d40654ba1177010d52a048e7a82ae93a/height=288;version=1;width=512/https%3A%2F%2Fimasashi.net%2Fblog%2Fwp-content%2Fuploads%2F2019%2F03%2Fmodalwindow-720x429.png)