NoLoJS logo

Modal/Popover - Auto

Add a popover attribute to any element to create a native HTML modal/popover element, no JS required.
The auto attribute value is the default, and is the same as having no value at all and having a value of “”, and allows for an implicit close.

Demo

I'm auto Popover!

auto is the default popover, can be "light dismissed" (clicking outside of it or hitting the esc key).

Opening an auto automatically closes any other auto popovers that were open.

Clicking the element that opened an auto popover a second time will close the popover that it opened.

The default CSS is initially `position: fixed` and hidden offscreen.

When opened, the default CSS positions the popover center/center on screen.

HTML

<!-- `popovertarget="pop-auto"` on the `button` connects to `id="pop-auto"` on the `dialog` -->
<button popovertarget="pop-auto">
   Toggle "auto" Popover
</button>
<dialog popover id="pop-auto">
  <h2>I'm <code>auto</code> Popover!</h2>
  <p><code>auto</code> is the default popover, can be "light dismissed" (clicking outside of it or hitting the <kbd>esc</kbd> key).</p>
  <p>Opening an <code>auto</code> automatically closes any other <code>auto</code> popovers that were open.</p>
  <p>Clicking the element that opened an <code>auto</code> popover a second time will close the popover that it opened.</p>
  <p>The default CSS is initially `position: fixed` and hidden offscreen.</p>
  <p>When opened, the default CSS positions the popover center/center on screen.</p>
</dialog>

CSS

/* If you wish to re-position the popover via CSS... */
dialog {
  margin: 0; /* Remove the default center/center */
  position: relative; /* Replaces the default position: fixed */
  top: 10%;  /* Provide a different top/left */
  left: 33%;
}

JS

No JS required.

Baseline

[`popover`](https://webstatus.dev/features/popover)

CodePen

See the Pen on CodePen.