ボタンクリックでポップアップを中央に表示！jQueryと純粋JSでの実装方法

やりたいこと

ボタンを押すと、画面の中央にポップアップが表示され、その中にテキストエリアなどのコンテンツを入れておくことで、ユーザーにとって見やすい画面を提供したい。

今回は純粋なJavascriptとJQueryの2パターンにて実装方法を示します。

共通部分

<!-- ポップアップの表示・非表示を切り替えるボタン -->
<button id="show-popup">ポップアップを表示</button>

<!-- ポップアップ本体（最初はdisplay: noneなので見えていない。） -->
<div id="popup-a" class="popup-a">
  <div>ここに文字列を挿入できます。</div>
  <textarea id="popup-textarea" rows="4" cols="50">テキストエリアの初期テキスト</textarea>
  <!-- ポップアップ内に非表示ボタンを設置 -->
  <button id="hide-popup">ポップアップを非表示</button>
</div>



<!-- ポップアップのスタイル -->
<style>
  .popup-a {
	display: none;
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 300px;
	height: 200px;
	padding: 20px;
	background-color: white;
	border: 1px solid black;
	box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
	text-align: center;
  }
  #popup-textarea {
	width: 90%; /* ポップアップの幅に応じて調整 */
	margin-top: 10px; /* 上部のテキストからの間隔 */
	border: 1px solid;
　}
</style>

純粋なJavascriptの場合

<script>
// HTMLの読み込みが完了した後に関数を実行
document.addEventListener('DOMContentLoaded', function() {
    // 'show-popup' IDを持つ要素（表示ボタン）がクリックされたときに関数を実行
    document.getElementById('show-popup').addEventListener('click', function() {
        // 'popup-a' IDを持つ要素（ポップアップ）のスタイルをdisplay: blockに設定(元々はnoneだった。それを見えるようにした。)
        document.getElementById('popup-a').style.display = 'block';
    });
    // 'hide-popup' IDを持つ要素（非表示ボタン）がクリックされたときに関数を実行。
    document.getElementById('hide-popup').addEventListener('click', function() {
        // 'popup-a' IDを持つ要素（ポップアップ）のスタイルをdisplay: none'に設定(blockになっていたものを見えないように)
        document.getElementById('popup-a').style.display = 'none';
    });
});
</script>

JQueryの場合

<!-- JQを読み込む（JQを使うときのおまじないだと思って） -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
// HTMLの読み込みが完了した後に関数を実行
$(document).ready(function() {
    // 'show-popup' IDを持つ要素（表示ボタン）がクリックされたときに関数を実行
    $('#show-popup').click(function() {
        // 'popup-a' IDを持つ要素（ポップアップ）のスタイルをdisplay: blockに設定(元々はnoneだった。それを見えるようにした。)
        $('#popup-a').css('display', 'block');
    });

    // 'hide-popup' IDを持つ要素（非表示ボタン）がクリックされたときに関数を実行
    $('#hide-popup').click(function() {
        //  'popup-a' IDを持つ要素（ポップアップ）のスタイルをdisplay: none'に設定(blockになっていたものを見えないように)
        $('#popup-a').css('display', 'none');
    });
});
</script>