@moodxd/component-overlay v1.0.3

MoO Overlay

An Overlay is a full-screen pop-up box containing a large amount of content that appears when the user clicks an element triggering the Overlay to appear on the page. When visible, the Overlay is positioned on top of the window’s elements. The Overlay code typically is placed at the bottom of the page between the footer and the closing body tag, but before any script or link tags.

By default, the .Overlay styles include opacity:0, visibility:hidden, and height:0 which hides the Overlay and its content. When .is-open is added to .Overlay the styles are updated to opacity:1, visibility:visible, and height: 100% revealing the Overlay on the page.

Depends on Openable JS Component

Standard

<a href="#overlaytest" class="Button Button--primary" data-overlay-trigger="open">Open</a>

<!-- Ideally, place `.Overlay` just before close of `body` -->
<div id="overlaytest" class="Overlay">
  <a href="#overlaytest" class="Overlay-close" data-overlay-trigger="close"></a>
  <div class="Overlay-body Container u-pA25">
    <p>
    Macropoma (meaning big apple or large fruit) is an extinct genus of coelacanth in the class Sarcopterygii. These fishes have apparently been extinct for over 70 million years and are most closely related to the modern coelacanth Latimeria. Fossils of Macropoma have been found in both England and Czechoslovakia. Recorded fossils have bodies under two feet in length. A modern coelacanth measures five or more, but in other respects the two genera are remarkably similar, and share the same body plan with a three-lobed tail and stalked fins.
    </p>
    <a href="#overlaytest" class="Button Button--outline" data-overlay-trigger="close">Close</a>
  </div>
</div>

Dialog

<a href="#dialogtest" class="Button Button--primary" data-overlay-trigger="open">Open</a>

<!-- Ideally, place `.Overlay` just before close of `body` -->
<div id="dialogtest" class="Overlay Overlay--dialog">
  <div class="Overlay-body Container u-pA25">
    <div class="Dialog">
      <div class="Dialog-header">
        <h3>Header</h3>
      </div>
      <div class="Dialog-body">
        <p>
        Macropoma (meaning big apple or large fruit) is an extinct genus of coelacanth in the class Sarcopterygii. These fishes have apparently been extinct for over 70 million years and are most closely related to the modern coelacanth Latimeria.
        </p>
      </div>
      <div class="Dialog-footer">
        <a href="#dialogtest" class="Button Button--outline" data-overlay-trigger="close">Close</a>
      </div>
    </div>
  </div>
</div>