使用html+css+javaScript来编写一个点击按钮，出现黑色半透明遮罩，弹窗上面有输入框组的操作，有三个按钮分别是关闭，取消，确定，点击关闭按钮和取消按钮均为关闭弹窗，点击确定按钮为提交数据

可以使用以下代码来实现你的需求：

HTML:

<button id="showOverlay">点击显示遮罩</button>
<div id="overlay" class="overlay">
  <div class="overlay-content">
    <input type="text" placeholder="输入框1">
    <input type="text" placeholder="输入框2">
    <!-- 添加更多输入框组 -->
    <div class="buttons">
      <button id="closeBtn">关闭</button>
      <button id="cancelBtn">取消</button>
      <button id="submitBtn">确定</button>
    </div>
  </div>
</div>

CSS:

.overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5); /* 半透明黑色遮罩 */
  display: none;
}

.overlay-content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: #fff;
  padding: 20px;
  border-radius: 5px;
}

.buttons {
  display: flex;
  justify-content: flex-end;
  margin-top: 20px;
}

button {
  margin-left: 10px;
}

JavaScript:

document.getElementById("showOverlay").addEventListener("click", function() {
  var overlay = document.getElementById("overlay");
  overlay.style.display = "block";
});

document.getElementById("closeBtn").addEventListener("click", function() {
  var overlay = document.getElementById("overlay");
  overlay.style.display = "none";
});

document.getElementById("cancelBtn").addEventListener("click", function() {
  var overlay = document.getElementById("overlay");
  overlay.style.display = "none";
});

document.getElementById("submitBtn").addEventListener("click", function() {
  var inputs = document.querySelectorAll(".overlay-content input");
  var data = {};
  inputs.forEach(function(input) {
    data[input.placeholder] = input.value;
  });
  console.log("提交的数据:", data);
});

这段代码会创建一个按钮，点击按钮后会显示一个黑色半透明的遮罩，并在遮罩上方显示输入框组和三个按钮。点击关闭按钮或取消按钮，遮罩会隐藏起来；点击确定按钮，会将输入框中的数据以对象的形式打印到控制台。

注意：为了方便起见，这里只显示了两个输入框，你可以根据需要添加更多输入框组。