Overlay

Default

Show / Hide
<div data-toggle="#overlay01" class="e-btn e-btn-secondary">
  Show / Hide
</div>
<div id="overlay01" class="overlaycontainer e-hidden">
  <div class="e-overlay"></div></div>


                        <div data-toggle="#overlay01" class="e-btn e-btn-secondary">Show / Hide</div>
                        <div id="overlay01" class="overlaycontainer e-hidden">
                          <div class="e-overlay"></div>
                        </div>

Variations

Centered
e-overlay-centered

Show / Hide
<div data-toggle="#overlay02" class="e-btn e-btn-secondary">
  Show / Hide
</div>
<div id="overlay02" class="overlaycontainer e-hidden">
  <div class="e-overlay e-overlay-centered">
    <div class="e-overlay__center">
      <e-spinner></e-spinner>
    </div>
  </div>
</div>


                        <div data-toggle="#overlay02" class="e-btn e-btn-secondary">Show / Hide</div>
                        <div id="overlay02" class="overlaycontainer e-hidden">
                          <div class="e-overlay e-overlay-centered">
                            <div class="e-overlay__center">
                              <e-spinner></e-spinner>
                            </div>
                          </div>
                        </div>

Inverse
e-overlay-inverse

Show / Hide
<div data-toggle="#overlay03" class="e-btn e-btn-secondary">
  Show / Hide
</div>
<div id="overlay03" class="overlaycontainer e-hidden">
  <div class="e-overlay e-overlay-centered e-overlay-inverse">
    <div class="e-overlay__center">
      <e-spinner></e-spinner>
    </div>
  </div>
</div>


                        <div data-toggle="#overlay03" class="e-btn e-btn-secondary">Show / Hide</div>
                        <div id="overlay03" class="overlaycontainer e-hidden">
                          <div class="e-overlay e-overlay-centered e-overlay-inverse">
                            <div class="e-overlay__center">
                              <e-spinner></e-spinner>
                            </div>
                          </div>
                        </div>

Transparent
e-overlay-transparent

Show / Hide
<div data-toggle="#overlay04" class="e-btn e-btn-secondary">
  Show / Hide
</div>
<div id="overlay04" class="overlaycontainer e-hidden">
  <div class="e-overlay e-overlay-centered e-overlay-transparent">
    <div class="e-overlay__center">
      <e-spinner></e-spinner>
    </div>
  </div>
</div>


                        <div data-toggle="#overlay04" class="e-btn e-btn-secondary">Show / Hide</div>
                        <div id="overlay04" class="overlaycontainer e-hidden">
                          <div class="e-overlay e-overlay-centered e-overlay-transparent">
                            <div class="e-overlay__center">
                              <e-spinner></e-spinner>
                            </div>
                          </div>
                        </div>

Local
e-overlay-local

Show / Hide
<div data-toggle="#overlay05" class="e-btn e-btn-secondary">
  Show / Hide
</div>
<div id="overlay05" style="position: relative; width: 320px; height: 400px; background: #bbb;" class="overlaycontainer e-hidden">
  <div class="e-overlay e-overlay-centered e-overlay-inverse e-overlay-local">
    <div class="e-overlay__center">
      <e-spinner></e-spinner>
    </div>
  </div>
</div>


                        <div data-toggle="#overlay05" class="e-btn e-btn-secondary">Show / Hide</div>
                        <div id="overlay05" style="position: relative; width: 320px; height: 400px; background: #bbb;" class="overlaycontainer e-hidden">
                          <div class="e-overlay e-overlay-centered e-overlay-inverse e-overlay-local">
                            <div class="e-overlay__center">
                              <e-spinner></e-spinner>
                            </div>
                          </div>
                        </div>

Below topnav
e-overlay-below_topnav

Show / Hide
<div data-toggle="#overlay06" class="e-btn e-btn-secondary">
  Show / Hide
</div>
<div id="overlay06" style="position: relative; width: 320px; height: 400px; background: #bbb;" class="overlaycontainer e-hidden">
  <div class="e-overlay e-overlay-centered e-overlay-inverse e-overlay-local e-overlay-below_topnav">
    <div class="e-overlay__center">
      <e-spinner></e-spinner>
    </div>
  </div>
</div>


                        <div data-toggle="#overlay06" class="e-btn e-btn-secondary">Show / Hide</div>
                        <div id="overlay06" style="position: relative; width: 320px; height: 400px; background: #bbb;" class="overlaycontainer e-hidden">
                          <div class="e-overlay e-overlay-centered e-overlay-inverse e-overlay-local e-overlay-below_topnav">
                            <div class="e-overlay__center">
                              <e-spinner></e-spinner>
                            </div>
                          </div>
                        </div>

Overlay

Opening the overlay needs javascript, you have to the care of toggling display property on the overlay element.

Our default overlay is dark, but there is an inverse version.

Our default overlay covers the entire screen with position: fixed, but you can also use a "local" version (last example). The parent element should have position specified (relative, absolute).

Last update

Message refactor(doc): toggle button querySelector
Date:
()
Committer: david.kocsis
Component history