css自己洗一个dialog

你可以使用CSS来创建一个自定义对话框（dialog）。下面是一个示例代码：

HTML部分：

<button id="open-dialog">打开对话框</button>

<div id="dialog-overlay">
  <div id="dialog-box">
    <h2>这是一个自定义对话框</h2>
    <p>这里可以放置对话框的内容。</p>
    <button id="close-dialog">关闭对话框</button>
  </div>
</div>

CSS部分：

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

#dialog-box {
  background-color: white;
  padding: 20px;
  border-radius: 5px;
}

#close-dialog {
  margin-top: 10px;
}

#open-dialog {
  margin-bottom: 20px;
}

JavaScript部分：

document.getElementById("open-dialog").addEventListener("click", function() {
  document.getElementById("dialog-overlay").style.display = "flex";
});

document.getElementById("close-dialog").addEventListener("click", function() {
  document.getElementById("dialog-overlay").style.display = "none";
});

这段代码创建了一个按钮，当点击按钮时，会显示一个自定义的对话框。对话框由一个半透明的背景遮罩（overlay）和一个包含内容的对话框框（box）组成。点击对话框中的关闭按钮可以关闭对话框。

你可以根据需要自定义对话框的样式和内容，这只是一个简单的示例。