我想使用javascript在第一个对话框上单击按钮后，显示另一个具有相同样式的对话框

<div id="dialog1" class="dialog">
  <h2>对话框1</h2>
  <button onclick="showDialog2()">显示对话框2</button>
</div>

<div id="dialog2" class="dialog">
  <h2>对话框2</h2>
  <button onclick="hideDialog2()">隐藏对话框2</button>
</div>

.dialog {
  display: none;
  border: 1px solid #ccc;
  padding: 10px;
  width: 300px;
  text-align: center;
}

button {
  margin-top: 10px;
}

function showDialog2() {
  var dialog2 = document.getElementById("dialog2");
  dialog2.style.display = "block";
}

function hideDialog2() {
  var dialog2 = document.getElementById("dialog2");
  dialog2.style.display = "none";
}