Link copied!

Overlay Examples

<div class="e-btn e-btn-primary">Show / Hide</div>
<div class="overlaycontainer e-hidden">
  <div class="e-overlay"></div>
</div>
Copy Javascript
Copied to clipboard! 
document.querySelector('.e-btn').addEventListener('click', () => {
  document.querySelector('.overlaycontainer').classList.toggle('e-hidden');
});
<div class="e-btn e-btn-primary">Show / Hide</div>
<div class="overlaycontainer e-hidden">
  <div class="e-overlay e-overlay-centered">
    <div class="e-overlay__center">
      <e-spinner></e-spinner>
    </div>
  </div>
</div>
Copy Javascript
Copied to clipboard! 
document.querySelector('.e-btn').addEventListener('click', () => {
  document.querySelector('.overlaycontainer').classList.toggle('e-hidden');
});
<div class="e-btn e-btn-primary">Show / Hide</div>
<div 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>
Copy Javascript
Copied to clipboard! 
document.querySelector('.e-btn').addEventListener('click', () => {
  document.querySelector('.overlaycontainer').classList.toggle('e-hidden');
});
<div class="e-btn e-btn-primary">Show / Hide</div>
<div 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>
Copy Javascript
Copied to clipboard! 
document.querySelector('.e-btn').addEventListener('click', () => {
  document.querySelector('.overlaycontainer').classList.toggle('e-hidden');
});
<div class="e-btn e-btn-primary">Show / Hide</div>
<div class="e-margin-top-m e-border-all e-border-radius" style="height: 200px;">
  <div class="overlaycontainer e-hidden" style="position: relative; height: 198px;">
    <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>
Copy Javascript
Copied to clipboard! 
document.querySelector('.e-btn').addEventListener('click', () => {
  document.querySelector('.overlaycontainer').classList.toggle('e-hidden');
});