使用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>
</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;
}

button {
  margin-top: 20px;
}

JavaScript:

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

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

这段代码会创建一个按钮，点击按钮后会显示一个黑色半透明的遮罩，并在遮罩上方显示输入框组。当点击遮罩区域时，遮罩会隐藏起来。

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