作成したモーダルと背景をその場で固定したい（JavaScript）

JavaScript初心者で、勉強のためにモーダルを作成しています。
モーダル自体はちゃんと動いていて、モーダルを表示した時の背景が暗くなるような表示も出来ています。
ただ現在、モーダルそのものも、背景も、どちらもスクロール出来てしまう状態です。
モーダルへ繋がるボタンをクリックしたその場でモーダルと背景を固定したいのですが、どのようなJSを書けば出来ますでしょうか？
暗い背景のdivとモーダルのdivは、現在body直下にあります。
まだjQueryを勉強していないので、出来ればJavaScriptの書き方で教えていただけるとありがたいです。

<div id="full"></div>
<div id="modalInfo" style="display: none;">
　　　　　モーダルの内容をここに書いています。
</div>

fullのidがついたdivが背景用で、モーダルが表示されてる間はover_rayというclassがつく処理を書いています。
ふたつともbodyの直下にあります。

よろしくお願いいたします。

kei344

2018/03/16 01:16

まだ質問が「受付中」になっていますが、「ベストアンサー」を選び「解決済」にされてはいかがでしょうか。

eggplant_bc

2018/03/16 02:06

失礼しました！忘れてました。ご指摘ありがとうございます。

行動規範の内容に同意します

回答2件

似たような実装になっているBootstrapを参考にすればいいかと思います。
ダイアログを開いたときにbodyが「overflow: hidden;」になっています。
なお、ネイティブやjQuery UIのDialogにはそのような挙動はないようです。
https://getbootstrap.com/docs/4.0/components/modal/#live-demo

投稿2018/03/14 05:54

x_x

総合スコア13749

eggplant_bc

2018/03/15 21:40

x_xさん、ご回答いただきありがとうございました！ JSの動きを読めなくて、教えていただいてやっとbodyにoverflow: hidden;が付いていることに気がつきました…。時間かかりましたが、モーダルを中央に固定することができました。ありがとうございました！

行動規範の内容に同意します

ベストアンサー

スクロールというのが、どこがどういう風にスクロールしてしまうかにもよるので、
答えようがないのですが・・・、
ページのスクロールができてしまい、モーダルがずれてしまう、という解釈でお話しします。
position: fixedで固定にすればいいと思います。
（前提ばかりですみませんが、モーダル背景の大きさは、縦横100%の大きさにしている前提です。）

javascript
1var back = document.getElementById("full"),
2  modal = document.getElementById("modalInfo");
3back.style.position = "fixed";
4back.modal.position = "fixed";
5
6// jQuery使ってるなら下記
7$("#full").css("position", "fixed");
8$("#modalInfo").css("position", "fixed");

戻す時は、

javascript
1back.style.position = "";
2back.modal.position = "";
3
4// jQuery使ってるなら下記
5$("#full").css("position", "");
6$("#modalInfo").css("position", "");