打开弹窗，body滚动条消失

<button onclick="showModal(dialog1)">打开弹窗</button>
  <div class="con"></div>
  <div class="con"></div>
  <div class="con"></div>
  <div class="con"></div>
  <div class="con"></div>
  <div class="con"></div>
  <div class="con"></div>
  <div class="con"></div>
  <div class="con"></div>
  <div class="con"></div>
  <div class="con"></div>
  <dialog id="dialog1">
    <h3>我是弹窗</h3>
    <button onclick="showModal(dialog2)">打开第二个弹窗</button>
    <button onclick="closeModal(dialog1)">关闭</button>
  </dialog>
  <dialog id="dialog2">
    <h3>我是第二个弹窗</h3>
    <button onclick="closeModal(dialog2)">关闭</button>
  </dialog>

html,body{
  font-family: -apple-system, "BlinkMacSystemFont", sans-serif;
  margin: 0;
  height: 100%;
  background: aliceblue;
  gap: 10px;
}
.con{
  height: 300px;
  border-radius: 8px;
  background: #FFECC7;
  margin: 10px;
}
body:has(dialog[open]){
  overflow: hidden
}

function showModal(dialog){
  dialog.showModal()
}
function closeModal(dialog){
  dialog.close()
}