NoLoJS logo

Offscreen Content - Related Content

Add a popover attribute to any element to create a native HTML modal/popover/dialog element, no JS required.

Demo

HTML

<!-- `popovertarget="related"` on the `button` connects to `id="related"` on the `aside` -->
<button popovertarget="related">
  Related Content
</button></p>
<aside popover="manual" id="related">
  <p>This is the related content.</p>
  <p>It requires an explicit close action.</p>
  <p>Click either the same "Related Content" button or the "Close Related Content" button below, to close it.</p>
  <button popovertarget="related" popovertargetaction="hide">×</button>
</aside>

CSS

aside {
  background-color: var(--green-med);
  border: 4px solid var(--green-dark);
  padding: .5rem 1rem;
  max-width: 400px;
  & button {
    position: absolute;
    top: .5rem;
    right: 1em;
  }
}

JS

No JS required.

Baseline

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

CodePen

See the Pen on CodePen.