今回はライトボックスの作成時に背景を固定する方法を紹介します。また今回の方法はjQueryを読み込む方法なので非常に簡単に実装できます。背景がスクロールしてしまって困ってる方は参考にして下さい。
ライトボックスを作成すると、長い文章などが入った時にスクロールする仕様にするかと思います。その際に以下のように背景にあるbodyコンテンツも一緒にスクロールしてしまうと気持ちが悪いですね。そんな時に今回の方法を使用して下さい。
背景を固定してライトボックス作成する方法（jQuery使用）
*基本全てコピペでOKです（位置は調整）
まず初めに今回はjQueryを使用するので<head></head>の中に以下のコードを入れてください。
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
今回作成した以下はライトボックスのHTMLです。
<div>
<a href="" class="btn">クリックでモーダルを表示</a>
</div>
<div class="content">
<div class="overlay"></div>
<div class="modal">
<h2>モーダルの中身です</h2>
<p>これがモーダルのテキストです。これがモーダルのテキストです。これがモーダルのテキストです。</p>
<a href="" class="modal__close">閉じる</a>
</div>
</div>classのoverlayはライトボックス周りの薄黒い背景カバーです。modalはライトボックス本体です。その中に本文を入れていきます。そしてmodal__closeは閉じるボタンになります。
今回作成した以下はライトボックスのCSSです。
/* モーダル表示時に背景固定 */
body.fixed {
position: fixed;
left: 310px; /* 調整は必要かも */
}
.content {
display: none;/* 初期状態 */
position: fixed;
top: 0;
left: 0;
width: 100%;/* モーダルは画面いっぱいに */
height: 100vh;/* モーダルは画面いっぱいに */
}
.overlay {
width: 100%;/* 黒背景も画面いっぱいに */
height: 100vh;/* 黒背景も画面いっぱいに */
background-color: rgba(0, 0, 0, 0.5);
}
/* 配置関連。モーダル自体とは関係なし */
.modal {
position: absolute;
background-color: #fff;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 70%;
height: 300px;
overflow: scroll;
padding: 50px;
}
/* モーダルボタンデザイン */
.btn {
border: solid 1px #ccc;
background: #ccc;
color: #fff;
padding: 20px;
width: 50%;
margin: 0 auto;
text-decoration: none;
display: flex;
justify-content: center;
}
/* 閉じるボタンデザイン */
.modal__close {
border: solid 1px #ccc;
background: #ccc;
color: #fff;
padding: 20px;
width: 50%;
margin: 0 auto;
text-decoration: none;
display: flex;
justify-content: center;
}body.fixedは通常存在しないクラスですがJavaScript側でライトボックスが開くとbodyに「.fixed」を付ける動作が入ります。これによりCSSに記述されている3行目のposition: fixed;が効いて固定される訳です。
またpaddingやpositionなどの位置関連は多少調整は必要になると思いますが基本的にコピぺでいけます。
今回作成した以下はライトボックスのJavaScriptです。
$(function() {
var scrollPos; //topからのスクロール位置
$('.btn').click(function() {
scrollPos = $(window).scrollTop(); //topからのスクロール位置を格納
$('.content').fadeIn(); //モーダルをフェードイン
$('body').addClass('fixed').css({ top: -scrollPos }); //背景固定
return false; //<a>を無効化
});
$('.overlay, .modal__close').click(function() {
$('.content').fadeOut(); //モーダルをフェードアウト
$('body').removeClass('fixed').css({ top: 0 }); //背景固定を解除
$(window).scrollTop(scrollPos); //元の位置までスクロール
return false; //<a>を無効化
});
});先程の説明通り、JavaScriptの6行目でbodyに「fixed」が付く事によりCSSで背景（body）が固定されるのですが、それだとライトボックス内でスクロールした動作分背景も動いたことになってしまいます。（見た目上だとわからないでは後ろでは動く）それを回避するためにscrollPosを使いライトボックス内で動かしたスクロール距離を測ってその分戻す処理を追加しています。
これで背景が固定されたライトボックスの完成です。実際の動きは以下の様になっています。
以上が「背景を固定してライトボックス作成する方法（jQuery）」でした。
JavaScriptのみでライトボックス（モーダル）を作成したい方は以下の記事を参照ください。
