NoLoJS logo

Modal/Popover - Manual

Add a popover attribute to any element to create a native HTML modal/popover element, no JS required.
The manual attribute value requires an explicit “close” action.

Demo

I'm manual Popover!

A manual popover can not be "light dismissed".

Opening a manual popover does not automatically close any other manual popovers that were open, but will close any auto popovers that were open.

Clicking the element that opened a manual 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-manual"` on the `button` connects to `id="pop-manual"` on the `dialog` -->
<button popovertarget="pop-manual">
   Toggle "manual" Popover
</button>
<dialog popover="manual" id="pop-manual">
  <h2>I'm <code>manual</code> Popover!</h2>
  <p>A <code>manual</code> popover can <strong>not</strong> be "light dismissed".</p>
  <p>Opening a <code>manual</code> popover does <strong>not</strong> automatically close any other <code>manual</code> popovers that were open, but <em>will</em> close any <code>auto</code> popovers that were open.</p>
  <p>Clicking the element that opened a <code>manual</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.