【Javascript】モーダルを閉じたときに上に戻らないようにしたい

Question

実現したいこと

モーダルを閉じたときに上に戻らないようにする。

前提

ページ内に複数設置できるモーダルをJavascriptで作っています。
モーダル開いているときも背景を固定したいです。

発生している問題・エラーメッセージ

1回目は、モーダル開く・閉じても背景固定しくれていますが、
2回目の開くまでは背景固定していて、閉じると上へスクロールされてしまいます。
3回目も開くまでは背景固定、閉じると上へ戻ります。

試したこと

「 window.pageYOffset 」が原因のような気がしますが、どうしたらよいのか分かりません。
よろしくお願い致します(o_ _)o

修正

cssが間違っていたので修正。
javascriptも意図した挙動になるように修正。
cssのクラスを修正した後html側も修正

▼修正後

<p><a class="js_mdl_open mdl_open_txt" href="" data-mdlopen="mdl1">モーダル開く</a></p>

<div class="mdl js_mdl" data-mdl="mdl1"><!-- モーダル -->
		<div class="js_mdl_overlay mdl_overlay"></div>
		<div class="mdl_wrapper">
			<div class="mdl_white"><!-- white -->
				<div class="mdl_content"><!-- content -->
					<div class="mdl_close"><span class="mdl_close_icon js_mdl_close_icon"></span></div><!-- 閉じるボタン -->
					<div class="mdl_main"><!-- main -->
						<div class="mdl_main_content">
								<p>text等が入る</p>
						</div>
					</div><!--END main -->
				</div><!--END content -->

			</div><!--END white -->
		</div><!--END mdl_wrapper -->
	</div><!--END mdl -->

▼修正後

.mdl {
  display: none;
  opacity:0;
}
.mdl.mdl_active {
  display: block;
  opacity:1;
  animation-name: mdlactive;
  animation-duration: .3s;
  width: 100%;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  background-color: transparent;
  overscroll-behavior: contain;
  overflow-y: scroll;
  z-index: 10000;
}
@keyframes modalactive{
  from {opacity:0;}
  to {opacity: 1;}
}
.mdl_overlay {
  position:fixed;
  top:0;
  left:0;
  z-index: 10000;
  width: 100%;
  height: 100%;
  background-color: #000;
  opacity: 0.7;
}
.mdl_wrapper {
  position:fixed;
  top:0;
  left:0;
  z-index: 10001;
  width: 100%;
  height: 100%;
  padding: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.mdl_white {
  width: min(100%,770px);
  height: auto;
  background-color: #fff;
z-index: 10002;
}
.mdl_content {
  background-color: #fff;
  width: 100%;
  height: 100%;
  max-height: 600px;
  overflow-y: scroll;
  overflow-x: hidden;
  position: relative;/* 閉じるアイコン */
}
.mdl_main {
  padding: 2em 1.5em;
}
.mdl_main_content { width: 100%;}
/* 閉じるアイコン */
.mdl_close {
  position: absolute;
  top: 0;
  right: 0px;
}
.mdl_close_icon {
  display: block;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  transform: rotate( 45deg);
  padding-left: 25px;
  padding-right: 25px;
  padding-top: 10px;
  padding-bottom: 40px;
  margin-top: 10px;
}
.mdl_close_icon::before {
  content: "";
  display: block;
  width: 31px;
  height: 1px;
  background-color: #222;
  transform: translate(-15px,15px);
}
.mdl_close_icon::after {
  content: "";
  display: block;
  width: 1px;
  height: 31px;
  background-color: #222;
}
.mdl_close_icon:hover {
  cursor: pointer;
}

const mdlOpen = document.querySelectorAll('.js_mdl_open');// 開くボタン
const mdl = document.querySelectorAll('.js_mdl');// モーダル本体
const body = document.body;

	//モーダル開くイベント発火
	mdlOpen.forEach( from => {
		from.addEventListener("click",function(e){
		e.preventDefault();
		e.stopPropagation();
		body.style.top = -(window.pageYOffset) +'px';//fixedより後にきてはダメ

		const datavalue =from.dataset.mdlopen;//dataset値取得（開く）

		mdl.forEach( (to) => {
			if( datavalue == to.dataset.mdl){
				openModal(to);
			}
		})//forEach
		})
	})//forEach

	// モーダル開く
	function openModal(element){
		// 背景固定
		body.style.position = "fixed";
		// モーダル表示
		element.classList.add('modal_active');

		//モーダル閉じるイベント発火
		const closebtn = element.querySelector('.js_mdl_close_icon');
		closebtn.addEventListener('click', function(e){
			e.stopPropagation();
			closeModal(element);
		});

		//モーダル閉じるイベント発火
		addEventListener('click', function(e){
			e.stopPropagation();
			const mdlWrapper = element.querySelector('.js_mdl_wrapper');
			if(e.target == mdlWrapper){
				closeModal(element);
			}
		})
	}


	// モーダル閉じる
	function closeModal(mdl){
		// topの値取得
		const scrollY = body.style.top;
		// モーダル閉じる
		mdl.classList.remove('modal_active');
		// 背景固定解除
		body.style.position = "";

		body.style.top = '';
		window.scrollTo({
			behavior: "instant",
			left: 0,
			top: parseInt(scrollY || '0')*-1
		});
	}

▼修正後

	const mdlOpens = document.querySelectorAll('.js_mdl_open');// 開くボタン
	const mdls = document.querySelectorAll('.js_mdl');// モーダル本体
	const body = document.body;

	mdlOpens.forEach( mdlOpen => {
		//モーダル開くイベント発火
		mdlOpen.addEventListener("click", e =>{
			e.preventDefault();
			e.stopPropagation();

			body.style.top = -(window.pageYOffset) +'px';//fixedより後にきてはダメ
			const datavalue = mdlOpen.dataset.mdlopen;//dataset.mdlopen

			mdls.forEach( (mdl) => {
				if( datavalue == mdl.dataset.mdl){//dataset.mdl
					body.style.position = "fixed";
					mdl.classList.add('mdl_active');

					const closebtn = mdl.querySelector('.js_mdl_close_icon');
					const mdlOverlay = mdl.querySelector('.js_mdl_overlay');

					let scrollY = body.style.top;// topの値取得して変数に格納

					closebtn.addEventListener('click',closeModal);
					mdlOverlay.addEventListener('click',closeModal);

					// モーダル閉じる
					function closeModal(){
						mdl.classList.remove('mdl_active')
						body.style.position = "";
						body.style.top = '';
						window.scrollTo({
							behavior: "instant",
							left: 0,
							top: parseInt(scrollY || '0')*-1
						});
					};//closeModal
				}//if
			})//forEach
		})
	})//forEach

Comments

[退会済みユーザー]

あなたが使っている「モーダル」とは何ですか？ 自作したもの？ Bootstrap Modal, jQuery UI Dialog など利用？

[a_a]

すみません、自作したものです。

[退会済みユーザー]

そうすると推奨していない質問の「コードをください・デバッグしてください等の丸投げの質問」になってしまうのですが⇒ https://teratail.com/help/avoid-asking

[ak.n]

「2回目の開くまでは背景固定していて、閉じると上へスクロールされてしまいます。
　3回目も開くまでは背景固定、閉じると上へ戻ります。」
という現象が、確認できませんでした。背景のコンテンツが少ないからですかね。

[a_a]

SurferOnWwwさん
そうですね、もう少し色々やってみます。コメントありがとうございますm(__)m

[a_a]

ak.nさん
ありがとうございますm(__)m
実際はコンテンツが多いです。

閉じるボタンをクリックしても、overlay部分が反応しています。
モーダル閉じた後にどこかをクリックしても反応しているので、html・cssから見直してみます。

Answer 1

• モーダルを開いた後、クリックするたびに閉じる関数が反応していましたが、クラスがダブっていたことが原因でした。　クラスを変更することで解決しました。

• 2回目以降、モーダル閉じると上へスクロールしてしまう現象は、「let scrollY = body.style.top;」の記述場所を変更することで解決しました（閉じる関数が呼び出される前に記述）

根本的な解決になっていなかったのでやり直しました。
「let scrollY = body.style.top;」の場所は元に戻して、閉じるイベントをremoveしました。

const mdlOpens = document.querySelectorAll('.js_mdl_open');// 開くボタン
	const mdls = document.querySelectorAll('.js_mdl');// モーダル本体
	const body = document.body;

	mdlOpens.forEach( mdlOpen => {
		//モーダル開くイベント発火
		mdlOpen.addEventListener("click", e =>{
			e.preventDefault();
			e.stopPropagation();
			body.style.top = -(window.pageYOffset) +'px';//fixedより後にきてはダメ
			const datavalue = mdlOpen.dataset.mdlopen;//dataset.mdlopen

			mdls.forEach( (mdl) => {
				if( datavalue == mdl.dataset.mdl){//dataset.mdl
					body.style.position = "fixed";
					mdl.classList.add('mdl_active');

					const closebtn = mdl.querySelector('.js_mdl_close_icon');
					const mdlOverlay = mdl.querySelector('.js_mdl_overlay');

					closebtn.addEventListener('click',closeModal);
					mdlOverlay.addEventListener('click',closeModal);

					// モーダル閉じる
					function closeModal(e){
						e.stopPropagation();
						e.preventDefault();
						let scrollY = body.style.top;// topの値取得して変数に格納
						mdl.classList.remove('mdl_active')
						body.style.position = "";
						body.style.top = '';
						window.scrollTo({
							behavior: "instant",
							left: 0,
							top: parseInt(scrollY || '0')*-1
						});

						closebtn.removeEventListener('click',closeModal);
						mdlOverlay.removeEventListener('click',closeModal);

					};//closeModal
				}//if
			})//forEach
		})
	})//forEach