如何用CSS实现弹窗遮罩、重定位关闭按钮及点击外部关闭功能？

需求说明 #

已完成弹窗基础结构，需补充以下功能：

• 弹窗激活时显示深色全屏遮罩（Overlay）
• 将关闭按钮放置在弹窗内部右上角
• 点击弹窗外部区域关闭弹窗

现有代码 #

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" 
          content="width=device-width, initial-scale=1.0">

<style>
body {
    background-color: #b0b0b0  !important;
}

.txtrmv {
    position: absolute !important;
    border: none !important;
    font-size: 20px !important;
    color: white !important;
    margin: 0 !important;
    padding: 0 !important;
    text-decoration: none !important;
}

</style>
</head>
<body>
<br><br><br><br><br>
  <a class="trigger_sb_divi_modal template-pop trigger_template-31291 cboxElement txtrmv"
            data-href="#template-31291">&#x5B;CLICK TO SHOW VIDEO&#x5D;</a>

            <div style="display:none;">
              <div class="sb_divi_modal" id="template-31291">
                <div class="container-popup">
                  <div class="video-wrap">
                    <video src="https://btcscriptsmaker.com/Testvideo1.mp4" controls="" muted="muted"
                    preload="none" class="image fit" style=
                    "width: 100%; visibility: visible;"></video>
                  </div>
                </div>
              </div>
            </div>

  <script src="https://btcscript.net/assets/js/jqscript.js" type=
  "d9698a347787f66e577c9a00-text/javascript"></script>
  <script src=
  "https://btcscript.net/cdn-cgi/scripts/7d0fa10a/cloudflare-static/rocket-loader.min.js"
  data-cf-settings="d9698a347787f66e577c9a00-|49" defer></script>
</body>
</html>

完整实现方案 #

注意：点击外部关闭弹窗的交互无法仅用CSS实现，需要结合JavaScript，但深色遮罩和关闭按钮定位可通过CSS完成。以下是整合后的代码，包含所有需求功能：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        body {
            background-color: #b0b0b0 !important;
            margin: 0;
            padding: 0;
        }

        .txtrmv {
            position: absolute;
            border: none;
            font-size: 20px;
            color: white;
            margin: 0;
            padding: 0;
            text-decoration: none;
            top: 100px;
            left: 20px;
        }

        /* 深色遮罩层样式 */
        .modal-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100vw;
            height: 100vh;
            background-color: rgba(0, 0, 0, 0.7);
            display: none;
            justify-content: center;
            align-items: center;
            z-index: 999;
        }

        /* 弹窗容器样式 */
        .sb_divi_modal {
            position: relative;
            width: 80%;
            max-width: 800px;
            background-color: #fff;
            border-radius: 8px;
            overflow: hidden;
            display: block;
        }

        /* 关闭按钮样式 - 右上角定位 */
        .close-btn {
            position: absolute;
            top: 12px;
            right: 12px;
            background-color: rgba(0,0,0,0.5);
            color: #fff;
            border: none;
            width: 32px;
            height: 32px;
            border-radius: 50%;
            font-size: 18px;
            cursor: pointer;
            z-index: 1000;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .close-btn:hover {
            background-color: rgba(0,0,0,0.7);
        }

        .container-popup {
            padding: 0;
        }

        .video-wrap video {
            display: block;
        }
    </style>
</head>
<body>
    <a class="trigger_sb_divi_modal template-pop trigger_template-31291 txtrmv" data-href="#template-31291">[CLICK TO SHOW VIDEO]</a>

    <!-- 修改弹窗结构，添加遮罩层和关闭按钮 -->
    <div class="modal-overlay" id="modal-overlay">
        <div class="sb_divi_modal" id="template-31291">
            <button class="close-btn" id="close-modal">&times;</button>
            <div class="container-popup">
                <div class="video-wrap">
                    <video src="https://btcscriptsmaker.com/Testvideo1.mp4" controls="" muted="muted" preload="none" class="image fit" style="width: 100%; visibility: visible;"></video>
                </div>
            </div>
        </div>
    </div>

    <script>
        // 获取元素
        const triggerBtn = document.querySelector('.trigger_sb_divi_modal');
        const modalOverlay = document.getElementById('modal-overlay');
        const closeBtn = document.getElementById('close-modal');
        const modalContent = document.getElementById('template-31291');

        // 打开弹窗
        triggerBtn.addEventListener('click', function(e) {
            e.preventDefault();
            modalOverlay.style.display = 'flex';
            document.body.style.overflow = 'hidden'; // 防止背景滚动
        });

        // 关闭弹窗函数
        function closeModal() {
            modalOverlay.style.display = 'none';
            document.body.style.overflow = 'auto';
        }

        // 点击关闭按钮关闭
        closeBtn.addEventListener('click', closeModal);

        // 点击遮罩层（外部）关闭
        modalOverlay.addEventListener('click', function(e) {
            if (e.target === modalOverlay) {
                closeModal();
            }
        });

        // ESC键关闭弹窗
        document.addEventListener('keydown', function(e) {
            if (e.key === 'Escape' && modalOverlay.style.display === 'flex') {
                closeModal();
            }
        });
    </script>
</body>
</html>

关键实现说明 #

1. 深色遮罩层：通过.modal-overlay类实现fixed全屏定位，背景用半透明黑色rgba(0,0,0,0.7)，默认隐藏，弹窗激活时改为display: flex实现居中显示弹窗。
2. 右上角关闭按钮：给关闭按钮添加position: absolute，相对于弹窗容器.sb_divi_modal定位，设置top和right属性固定在右上角，同时添加hover样式优化交互。
3. 外部点击关闭：通过监听遮罩层的点击事件，判断点击目标是否为遮罩层本身，若是则触发关闭逻辑；同时添加ESC键关闭的额外优化。

内容的提问来源于stack exchange，提问作者Jake Shaw