js提交并弹出div窗口

在JavaScript中，提交表单并弹出一个div窗口通常涉及到表单提交事件的处理以及DOM操作。下面是一个基础的示例，展示了如何实现这一功能：

HTML部分

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Form Submission with Div Popup</title>
<style>
  /* 样式用于隐藏和显示弹出窗口 */
  #popup {
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: white;
    padding: 20px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    z-index: 1000;
  }
  /* 样式用于覆盖背景 */
  #overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 999;
  }
</style>
</head>
<body>

<form id="myForm">
  <input type="text" id="inputText" placeholder="Enter some text">
  <button type="submit">Submit</button>
</form>

<!-- 弹出窗口 -->
<div id="overlay"></div>
<div id="popup">
  <p>Form submitted successfully!</p>
  <button id="closePopup">Close</button>
</div>

<script src="script.js"></script>
</body>
</html>

JavaScript部分（script.js）

document.getElementById('myForm').addEventListener('submit', function(event) {
  event.preventDefault(); // 阻止表单默认提交行为

  // 这里可以添加表单数据处理逻辑，例如通过Ajax发送数据到服务器

  // 显示弹出窗口和覆盖层
  document.getElementById('overlay').style.display = 'block';
  document.getElementById('popup').style.display = 'block';
});

document.getElementById('closePopup').addEventListener('click', function() {
  // 隐藏弹出窗口和覆盖层
  document.getElementById('overlay').style.display = 'none';
  document.getElementById('popup').style.display = 'none';
});

解释

HTML部分：定义了一个简单的表单和一个用于弹出窗口的div元素，以及一个用于覆盖整个页面的div元素（作为背景）。
CSS部分：设置了弹出窗口和覆盖层的样式，初始状态下它们都是隐藏的。
JavaScript部分：
- 监听表单的提交事件，阻止其默认提交行为。
- 在表单提交后，显示弹出窗口和覆盖层。
- 监听关闭按钮的点击事件，隐藏弹出窗口和覆盖层。