<h1>dialog element</h1>

<h2>show()</h2>
<p>
  <button type="button" onclick="document.getElementById('dialog_show').show();">
    Open
  </button>
</p>
<dialog id="dialog_show">
  <p>
    <button type="button" onclick="document.getElementById('dialog_show').close();">
      Close
    </button>
  </p>
</dialog>

<h2>showModal()</h2>
<p>
  <button type="button" onclick="document.getElementById('dialog_show-modal').showModal();">
    Open
  </button>
</p>
<dialog id="dialog_show-modal">
  <p>
    <button type="button" onclick="document.getElementById('dialog_show-modal').close();">
      Close
    </button>
  </p>
</dialog>

<h2>Popover API</h2>
<p>
  <button type="button" popovertarget="dialog_popover" popovertargetaction="show">
    Open
  </button>
</p>
<dialog id="dialog_popover" popover="auto">
  <p>
    <button type="button" popovertarget="dialog_popover" popovertargetaction="hide">
      Close
    </button>
  </p>
</dialog>

<h2>CSS + show()</h2>
<p>
  <button type="button" onclick="document.getElementById('dialog_css_show').show();">
    Open
  </button>
</p>
<dialog id="dialog_css_show">
  <p>
    <button type="button" onclick="document.getElementById('dialog_css_show').close();">
      Close
    </button>
  </p>
</dialog>

<h2>CSS + showModal()</h2>
<p>
  <button type="button" onclick="document.getElementById('dialog_css_show-modal').showModal();">
    Open
  </button>
</p>
<dialog id="dialog_css_show-modal">
  <p>
    <button type="button" onclick="document.getElementById('dialog_css_show-modal').close();">
      Close
    </button>
  </p>
</dialog>

<h2>CSS + Popover API</h2>
<p>
  <button type="button" popovertarget="dialog_css_popover" popovertargetaction="show">
    Open
  </button>
</p>
<dialog id="dialog_css_popover" popover="auto">
  <p>
    <button type="button" popovertarget="dialog_css_popover" popovertargetaction="hide">
      Close
    </button>
  </p>
</dialog>

body {
  box-sizing: border-box;
  margin-block: 0;
  margin-inline: auto;
  max-inline-size: 40rem;
  min-block-size: 200dvb;
  padding: 1rem;
}
[id^="dialog_css_"] {
  & {
    border-image: linear-gradient(
        color-mix(in srgb, transparent, CanvasText 20%) 0% 100%
      )
      10000 / 10000px / 10000px;
    inset: 0;
    margin: auto;
    padding: 1rem;
    pointer-events: auto;
    position: fixed;
  }
  &::backdrop {
    background: none;
  }
  html:has(&[open], &:popover-open) {
    overflow: hidden;
    pointer-events: none;
    scrollbar-gutter: stable;
    touch-action: none;
  }
}