showModal()方法的自动层级特性演示页面

展示

代码

• HTML：

  <button class="button" onclick="dialog2.show();">show()方法显示对话框2</button>
  <button class="button" onclick="dialog2.showModal();">showModal()方法显示对话框2</button>
  
  <dialog id="dialog1">
      <p>我是弹框1。</p>
      <form method="dialog">
          <button class="button">确定</button>
      </form>
  </dialog>
  <dialog id="dialog2">
      <p>我是弹框2。</p>
      <p>
          <button class="button normal" onclick="dialog1.show();">show()方法显示对话框1</button>
          <button class="button normal" onclick="dialog1.showModal();">showModal()方法显示对话框1</button>
      </p>
      <form method="dialog">
          <button class="button">确定</button>
      </form>
  </dialog>

• CSS：

  dialog {
      z-index: 1;
      width: 360px;
      max-width: calc(100% - 2rem);
      border-radius: 8px;
      box-shadow: 0 4px 16px rgba(0, 0, 0, .1);
      border: 1px solid #0003;
  }
  dialog:modal p button:first-child {
      display: none;
  }
  dialog:not(:modal) p button:last-child {
      display: none;
  }