JS点击按钮弹窗修改数据

要实现点击按钮弹窗修改数据，你需要使用JavaScript编写以下步骤:

1. 给按钮添加点击事件监听器
2. 在监听器中获取需要修改的数据
3. 创建一个弹窗并在其中显示需要修改的数据
4. 让用户在弹窗中输入修改后的数据
5. 点击保存按钮后，获取用户输入的数据并更新原始数据
6. 关闭弹窗并将更新后的数据展示在页面上

以下是一个示例代码，仅供参考：

<!-- HTML -->
<button id="edit-btn">编辑数据</button>

<script>
  // JavaScript
  const data = { name: '张三', age: 18 };

  const editBtn = document.getElementById('edit-btn');
  editBtn.addEventListener('click', () => {
    // 获取需要修改的数据
    const name = data.name;
    const age = data.age;

    // 创建弹窗并显示数据
    const popup = document.createElement('div');
    popup.innerHTML = `
      <label>姓名：</label><input type="text" id="name-input" value="${name}"><br>
      <label>年龄：</label><input type="number" id="age-input" value="${age}"><br>
      <button id="save-btn">保存</button>
    `;
    document.body.appendChild(popup);

    // 保存按钮点击事件监听器
    const saveBtn = document.getElementById('save-btn');
    saveBtn.addEventListener('click', () => {
      // 获取用户输入的数据
      const newName = document.getElementById('name-input').value;
      const newAge = document.getElementById('age-input').value;

      // 更新原始数据
      data.name = newName;
      data.age = newAge;

      // 关闭弹窗
      document.body.removeChild(popup);

      // 更新页面展示的数据
      // ...
    });
  });
</script>