以前の記事でも同じ趣旨の内容を書いたのですが、今回は別のやり方でモーダルウィンドウを表示したときの背景を固定します。

正確に言えば前回はモーダルウィンドウを含めたページ全体を固定するイメージでした。
この場合、スクロールバーが表示されるブラウザの場合スクロールバーが消えてしまうんですよね。

今回は固定というよりをスクロールさせない方法で、スクロールバーは消えません。ただし、より固定というイメージから遠いかもしれません。

html

htmlの構造は以前と同じで、土台の要素とモーダルウィンドウの要素を兄弟要素にします。

jQuery

モーダルウィンドウの要素を非表示にしておき、id open-modalをクリックした際に現在のスクロール値を変数fixedPointに代入します。
スクロールがなされた際に変数pointYにスクロール値を代入し、ウィンドウのスクロール値をfixedPointにもどします。

欠点はブラウザによってスクロールするとカクカクしたり、一度スクロールした後にヒョイと元の位置に戻る点。


この部分を以下のように変えてもいいかもしれません。
この場合、戻っていることがわかりやすいのかも。ただもう固定とは程遠い?