如何创建一个带有模式窗口的窗体？

<button onclick="openModal()">打开模式窗口</button>
<div id="modal"></div>

function openModal() {
  // 创建模式窗口的容器元素
  var modalContainer = document.createElement("div");
  modalContainer.className = "modal-container";

  // 创建模式窗口的内容元素
  var modalContent = document.createElement("div");
  modalContent.className = "modal-content";
  modalContent.innerHTML = "这是一个模式窗口";

  // 将内容元素添加到容器元素中
  modalContainer.appendChild(modalContent);

  // 将容器元素添加到页面中
  document.getElementById("modal").appendChild(modalContainer);
}

.modal-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
}

.modal-content {
  background-color: white;
  padding: 20px;
  border-radius: 5px;
}