【Javascript】ポップアップ画面を表示したい

方法はあらかじめポップアップ画面の領域を作成し、非表示にしておく。
ボタン押下で表示する。
<!DOCTYPE html>
<html>
<head>
    <title>ポップアップ画面</title>
    <style>
        /* スタイル付け */
        .popup-container {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.7); /* ポップアップの背景色と透明度を設定 */
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .popup-box {
            background-color: #fff;
            width: 400px;
            height: 400px;
            padding: 20px;
            border-radius: 5px;
            text-align: center;
            position: relative;
        }

        .close-button {
            position: absolute;
            top: 10px;
            right: 10px;
            cursor: pointer;
        }
    </style>
</head>
<body>

<!-- ポップアップを表示するボタン -->
<button onclick="openPopup()">ポップアップを表示</button>

<!-- ポップアップ画面のコンテナ -->
<div id="popup" class="popup-container">
    <!-- ポップアップの中身 -->
    <div class="popup-box">
        <!-- ×ボタン -->
        <span class="close-button" onclick="closePopup()">×</span>
        <h2>ポップアップのタイトル</h2>
        <p>ポップアップの内容をここに入れます。</p>
    </div>
</div>

<script>
    // ポップアップを開く関数
    function openPopup() {
        document.getElementById('popup').style.display = 'flex';
    }

    // ポップアップを閉じる関数
    function closePopup() {
        document.getElementById('popup').style.display = 'none';
    }
</script>

</body>
</html>