如何使用javascript打开模式和显示内容

<button onclick="openModal()">打开模式</button>

function openModal() {
  // 在这里编写打开模式的代码
}

function openModal() {
  // 创建模态框元素
  var modal = document.createElement("div");
  modal.classList.add("modal");

  // 创建模态框内容元素
  var modalContent = document.createElement("div");
  modalContent.classList.add("modal-content");

  // 创建关闭按钮元素
  var closeButton = document.createElement("span");
  closeButton.classList.add("close-button");
  closeButton.innerHTML = "×"; // 可以使用其他图标或文字表示关闭按钮

  // 创建显示内容元素
  var content = document.createElement("p");
  content.innerHTML = "这是模态框中的内容。";

  // 将关闭按钮和显示内容添加到模态框内容元素中
  modalContent.appendChild(closeButton);
  modalContent.appendChild(content);

  // 将模态框内容元素添加到模态框中
  modal.appendChild(modalContent);

  // 将模态框添加到页面中
  document.body.appendChild(modal);

  // 点击关闭按钮时关闭模态框
  closeButton.onclick = function() {
    document.body.removeChild(modal);
  }
}

.modal {
  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: #fff;
  padding: 20px;
  border-radius: 5px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}

.close-button {
  position: absolute;
  top: 10px;
  right: 10px;
  font-size: 20px;
  cursor: pointer;
}

p {
  margin: 0;
}