【JavaScript】モーダルを表示した時に背景を固定する方法

こんにちは！CODE CLUB965のKです！

今回は、モーダルを表示した際に背景を固定する方法について書こうと思います。

特にモーダル表示中にスクロールできても問題ないという方はいいのですが、固定したいという方は参考にして下さい。

モーダル表示時に背景を固定する

やることとしては、モーダルが開く際に、CSSファイルに

body {
  position: fixed;
}

を追加してあげる処理を入れてあげるだけです。

逆にモーダルが閉じる時は、固定するための「fixed」を消してあげればいいのです。

なので、まずモーダルが開く時に以下の処理を入れてあげます。

// モーダルが開いたら、bodyにfixedを付与
document.body.style.position = 'fixed';
document.body.style.top = 0;
document.body.style.left = 0;
document.body.style.right = 0;

bodyにfixedを付与するために、「document.body.style.position = 'fixed';」を記述します。

その後の処理は、fixed による表記ズレを補完するためのものです。
ここは必要に応じて変える必要があるかもしれません。

次にモーダルが閉じるときの処理に、

document.body.style.position = '';

この記述を追加すればOKです。

この記述をしないと、モーダルが閉じても画面が固定されたままになります。

以上でモーダル表示の時に背景を固定することができます。

最後に

今回は、モーダル表示時の背景固定の方法について紹介しました。

モーダルの表示方法については、また別の記事で紹介できればと思います。

それでは、また！

Follow me!