如何创建自定义messagebox？

<div id="customMessageBox" class="message-box">
  <div class="message-box-content">
    <p id="messageBoxText">这是一个自定义消息框。</p>
    <button id="closeButton">确定</button>
  </div>
</div>

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

.message-box-content {
  background-color: white;
  padding: 20px;
  border-radius: 5px;
  text-align: center;
}

function showMessage(message) {
  const msgBox = document.getElementById('customMessageBox');
  const msgText = document.getElementById('messageBoxText');
  const closeButton = document.getElementById('closeButton');

  msgText.textContent = message;
  msgBox.style.display = 'flex';

  closeButton.onclick = function() {
    msgBox.style.display = 'none';
  };
}

// 使用示例
showMessage('这是一条自定义消息！');