NoLoJS logo

Modal/Popover - Reposition

The modal / popover element is by default position: fixed in the center of the screen.
Using regular CSS, you can easily re-position that element anywhere you like, no JS required.

Demo

I'm an auto Popover!

The default position when opened is `position: fixed`, in the center of the screen.

But you can re-position the it simply with CSS.

HTML

<!-- `popovertarget="pop-auto"` on the `button` connects to `id="pop-auto"` on the `dialog` -->
<button popovertarget="pop-auto">
   Toggle Re-positioned Popover
</button>
<dialog popover id="pop-auto">
  <h2>I'm an <code>auto</code> Popover!</h2>
  <p>The default position when opened is `position: fixed`, in the center of the screen.</p>
  <p>But you can re-position the it simply with CSS.</p>
</dialog>

CSS

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

JS

No JS required.

Baseline

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

CodePen

See the Pen on CodePen.