やっぱり。JavaScript！- モーダルウィンドウ

ボタンを押すと、ポップアップでメッセージが表示されると言うものです。以下参考サイトです。

【Javascript】Javascriptでモーダルウィンドウを作ろう – エンジニアゲート

モーダルウィンドウはボタンを押すと、今まで開いていたウィンドウ画面とは別のウィンドウが開く機能です。
厳密にいえば、「ウィンドウ内で指定された操作を完了、またはキャンセルするまで他のウィンドウを開くことができないウィンドウ」という機能です。

HTMLです。

<div id="open">
	詳細をみる
</div>

<div id="mask" class="hidden"></div>

<section id="modal" class="hidden">
   <p>モータルウィンドウのテストです。閉じるのボタンをおしたらウィンドが閉じます</p>
   
   <div id="close">
		閉じる
   </div>
</section>  

まず最初にボタンを作ります。

<div id="open">
	詳細をみる
</div>

CSSは

#open,#close{
 cursor:pointer;
 width:200px;
 border:1px solid #ccc;
 border-radius:4px;
 text-align: center;
 padding:12px 0;
 margin:16px auto 0;
}

となります。

そして最初は

<div id="mask" class="hidden"></div>

CSSは　id="mask"　と　class="hidden"がついています。まずid="mask"で

#mask{
 background:rgba(0,0,0,0.4);
 position:fixed;
 top:0;
 bottom:0;
 left:0;
 right:0;
 z-index:1;
}

として、これを最初に表示された時には

#mask.hidden{
 display:none;
}

display:none;で表示させません。display:none;を外してみましょう。

こんな感じになります。ボタンを押すと"#mask.hidden"を外して表示させます。

そしてボタンを押すと出てくるモーダル部分ですが、

<section id="modal" class="hidden">
	<p>モータルウィンドウのテストです。閉じるのボタンをおしたらウィンドが閉じます</p>
	<div id="close">
		閉じる
	</div>
</section>  

CSSは、

#modal{
 background:#fff;
 width:300px;
 padding:20px;
 border-radius:4px;
 position:absolute;
 top:40px;
 left:0;
 right:0;
 margin:0 auto;
 transition:transform 0.4s;
 z-index:2;
}

これも、

#modal.hidden{
 transform:translate(0,-500px);
}

で最初は非表示です。

そして詳細ボタン(idはopen)を押した時に、

JavaScriptを実行して非表示にしているClassを外し表示します。

	open.addEventListener('click',()=>{
		modal.classList.remove('hidden');
		mask.classList.remove('hidden');
	});

前後しますが、id、ClassをJavaScriptで操作できるように変数に代入しておきます。

const open = document.getElementById('open');
const close = document.getElementById('close');
const modal = document.getElementById('modal');
const mask = document.getElementById('mask');

表示は

となります。そして"閉じる"ボタンを押すと、

close.addEventListener('click',()=>{
		modal.classList.add('hidden');
		mask.classList.add('hidden');
	});

が実行されてウインドウは閉じることができます。

ボタンを押さず、周りのマスクがの部分をクリックしても閉じることができます。そのスクリプトは

mask.addEventListener('click',()=>{
		close.click();
	});

となります。