如何为每个按钮配置独立弹窗内容（复用单个弹窗方案）

完全不用为每个按钮单独创建弹窗，只需要复用现有弹窗，同时维护一个存储对象来保存每个分类的输入内容，点击不同按钮时加载对应内容即可。

具体修改方案 #

1. 核心思路 #

• 给每个按钮加分类标识，用来区分不同操作对象
• 用对象存储每个分类的输入内容，键对应分类名称，值对应输入文本
• 打开弹窗时，根据当前点击的分类加载对应内容；关闭/输入时，把内容存回对象

2. 修改后的完整代码 #

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <Style>
        #myPopup {
            display: none;
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 300px;
            height: 200px;
            background-color: #180951;
            border: 1px solid #888;
            box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
        }
        #myPopupClose {
            float: right;
            font-size: 28px;
            color: yellow;
            font-weight: bold;
            cursor: pointer;
            margin-right: 10px;
        }
        #myPopupTextbox {
            width: 98%;
            height: 100px;
            background-color: #180951;
            border-color: #180951;
            color: yellow;
            resize: none;
            padding: 0;
        }
        .button {
            margin: 5px;
        }
    </Style>
</head>

<body>
    <div class='container'>
        <div class='sections'>
            <div class='firstRow'>
                <!-- 给按钮加data-category属性标识分类 -->
                <button class="button" data-category="cat1">cat1</button>
                <button class="button" data-category="cat2">cat2</button>
                <button class="button" data-category="cat3">cat3</button>
            </div>
            <div id="myPopup">
                <span id="myPopupClose">x</span>
                <h3 id="popupTitle">Create a category</h3>
                <textarea id="myPopupTextbox" placeholder="Write something..."></textarea>
            </div>
            <script>
                // 存储每个分类的输入内容
                const categoryContents = {
                    cat1: '',
                    cat2: '',
                    cat3: ''
                };
                let currentCategory = ''; // 记录当前操作的分类

                const buttons = document.querySelectorAll(".button");
                const popup = document.getElementById("myPopup");
                const closeBtn = document.getElementById("myPopupClose");
                const textbox = document.getElementById("myPopupTextbox");
                const popupTitle = document.getElementById("popupTitle");

                // 给每个按钮绑定点击事件
                buttons.forEach(btn => {
                    btn.onclick = function() {
                        currentCategory = this.dataset.category;
                        // 动态更新弹窗标题，明确当前分类
                        popupTitle.textContent = `Create category: ${currentCategory}`;
                        // 加载当前分类的内容到文本框
                        textbox.value = categoryContents[currentCategory];
                        popup.style.display = "block";
                    }
                });

                // 实时保存输入内容，避免意外关闭丢失
                textbox.addEventListener('input', function() {
                    if (currentCategory) {
                        categoryContents[currentCategory] = this.value;
                    }
                });

                closeBtn.onclick = function() {
                    // 关闭前再保存一次，双重保障
                    if (currentCategory) {
                        categoryContents[currentCategory] = textbox.value;
                    }
                    popup.style.display = "none";
                }

                window.onclick = function(event) {
                    if (event.target == popup) {
                        if (currentCategory) {
                            categoryContents[currentCategory] = textbox.value;
                        }
                        popup.style.display = "none";
                    }
                }
            </script>
        </div>
    </div>
</body>
</html>

3. 关键细节说明 #

• data-category属性：快速识别当前点击的分类，是关联存储内容的关键
• categoryContents对象：作为本地缓存，每个分类的内容独立存储，互不干扰
• 实时+关闭双重保存：既保证输入过程中内容不会丢失，也避免弹窗意外关闭导致内容未保存
• 动态标题：可选优化，让用户清晰知道当前操作的分类，提升使用体验

这种方案既节省DOM资源，代码也更易维护，完美实现每个分类内容独立的需求。

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