html实现弹窗编辑资料,《小白HTML5成长之路33》自定义弹窗修改弹窗内容实现方法...

要实现弹窗编辑资料，可以通过以下步骤：

1. 创建弹窗的HTML结构。

<div id="edit-popup">
  <div class="popup-content">
    <h2>编辑资料</h2>
    <form>
      <label for="name">姓名：</label>
      <input type="text" id="name" name="name"><br>
      <label for="email">邮箱：</label>
      <input type="email" id="email" name="email"><br>
      <label for="phone">电话：</label>
      <input type="tel" id="phone" name="phone"><br>
      <button type="submit">保存</button>
    </form>
  </div>
</div>

2. 使用CSS样式使弹窗居中显示，并且隐藏起来。

#edit-popup {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 9999;
}

.popup-content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: white;
  padding: 20px;
  border-radius: 5px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
  text-align: center;
}

3. 使用JavaScript代码来控制弹窗的显示和隐藏，并且在弹窗中填充之前的资料。

// 获取弹窗元素和触发弹窗的按钮元素
var popup = document.getElementById("edit-popup");
var btn = document.getElementById("edit-btn");

// 当点击按钮时，显示弹窗
btn.onclick = function() {
  popup.style.display = "block";
}

// 当用户提交表单时，隐藏弹窗
var form = popup.querySelector("form");
form.onsubmit = function() {
  popup.style.display = "none";
  return false;
}

// 在弹窗中填充之前的资料
var nameInput = form.querySelector("#name");
var emailInput = form.querySelector("#email");
var phoneInput = form.querySelector("#phone");
nameInput.value = "张三";
emailInput.value = "zhangsan@example.com";
phoneInput.value = "13812345678";

这样就可以实现一个弹窗编辑资料的功能了。当用户点击编辑按钮时，弹窗会弹出来，允许用户编辑资料；当用户提交表单后，弹窗会隐藏起来。同时，弹窗中会显示之前的资料，方便用户修改。