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

This content is meaningless, completely unnecessary for the component.

However, it helps demonstrate this variance of the "offscreen-content"...

In this case, if the author were writing about something and had a bit of related content to share, but they didn't necessarily want to interrupt the article, they might offer that related content in an initially-offscreen component that interested readers could explicitly request, while others could simply ignore...

HTML

<p>This content is meaningless, completely unnecessary for the component.</p>
<p>However, it helps demonstrate this variance of the "offscreen-content"...</p>
<p>In this case, if the author were writing about something and had a bit of <em>related content</em> to share, 
  but they didn't necessarily want to interrupt the article, they might offer that related content in an 
  initially-offscreen component that interested readers could explicitly request, while others could simply ignore...</p>

<!-- `popovertarget="related"` on the `button` connects to `id="related"` on the `aside` -->
<button popovertarget="related">
  Learn More About This
</button></p>
<aside popover="manual" id="related">
  <p>This is the related content.</p>
  <p>It requires an explicit close action.</p>
  <p>To close it, click either the same button that opened this or the "Close" button in this component.</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.