JavaScript(jQuery)とCSSでポップアップ画面を実現する

2020年5月16日

こんにちは、はるまきです。今回は「自作Webサービス解説シリーズ」です。今回で第14回目！　

自作Webサービスのアクアリウム専門の質問サイト→ Q&Aquarium

このシリーズでは、初学者の僕が学んだことや、ハマったポイントなどを紹介しています。間違っている箇所があればご指摘お願いします。※あくまで僕(はるまき)流の解釈をもとに作成しています。

1. 全体像
2. まずはhtml側とCSS側を準備
3. JavaScriptで非表示を”表示”に切り替える
4. 最後に

全体像

全体的なイメージとしては、

HTML側には常にポップアップさせる要素は隠れて潜んでいて、特定の処理（ボタンが押されるなど）のあと、jsが処理で、ポップアップ要素の表示させる。

といった流れです。

まずはhtml側とCSS側を準備

コピペでOK!実際に僕が自作Webアプリで使用しているコードを持ってきました。一部修正はしてあります。

    <!--ポップアップ画面-->
    <button id="hogeBtn">ボタン</button>  
      
    <div class="modal js-modal">
        <div class="modal__bg js-modal-close"></div>
        <div class="modal__content">
            <p>投稿しました！</p>
        </div>
    </div>

/*ポップアップ*/
.modal{
	display: none;　/*通常は非表示で！*/
	height: 100vh;
	position: fixed;
	top: 0;
	width: 100%;
}
.modal__bg{
	background: rgba(0,0,0,0.7);
	height: 100vh;
	position: absolute;
	width: 100%;
}
.modal__content{
	background: #fff;
	left: 50%;
	padding: 40px;
	position: absolute;
	top: 50%;
	transform: translate(-50%,-50%);
  width: 60%;
  text-align: center;
  font-size: 160%;
}

JavaScriptで非表示を”表示”に切り替える

JavaScriptで非表示状態のポップアップ要素を、表示するように切り替えます。

以下コード。

   $('#hogeBtn').on('click',function(){
      //質問投稿完了後のポップアップ表示
	  $('.js-modal').fadeIn();
   }

   //投稿完了後に表示するポップアップ画面を非表示にすると、TOP画面へ遷移する。
   $('.js-modal-close').on('click',function(){
       $('.js-modal').fadeOut();
   });

ボタンを押したらjsのfadeIn関数が実行されて、隠れていた要素が表示されます。

逆にclass="js-modal-close"を押下すると、フェードアウトします。