Link copied!

Popup Panel Examples

This component is automatically reversing the button order, this is intended. In the HTML you MUST define your primary button as the last element inside the .e-popup-panel__actions, see the example. 
<div class="e-popup-panel">
  This is the content of my popup.
</div>
<div class="e-popup-panel">
  <div class="e-popup-panel__header">
    <strong>Popup Panel Header</strong>
  </div>
  This is the content of my popup.
</div>
<div class="e-popup-panel">
  This is the content of my popup.
  <div class="e-popup-panel__footer">
    This is the footer of my popup
  </div>
</div>
<!-- only for example styling -->
<div style="position: relative; width: 300px; height: 200px; display: inline-block;">
<!-- only for example styling end-->

  <div class="e-popup-panel">
    This is the content of my popup.
    <div class="e-popup-panel__footer">
      <div class="e-popup-panel__actions">
        <button class="e-popup-panel__action e-btn e-btn-borderless">Button Label</button>
      </div>
    </div>
  </div>

<!-- only for example styling -->
  </div>
<!-- only for example styling end -->

<!-- only for example styling -->
<div style="position: relative; width: 300px; height: 200px; display: inline-block;">
<!-- only for example styling end -->

  <div class="e-popup-panel">
    This is the content of my popup.
    <div class="e-popup-panel__footer">
      <div class="e-popup-panel__actions">
        <button class="e-popup-panel__action e-btn e-btn-borderless">Cancel</button>
        <button class="e-popup-panel__action e-btn e-btn-primary">Apply</button>
      </div>
    </div>
  </div>

<!-- only for example styling -->
</div>
<!-- only for example styling end-->
<!-- only for example styling -->
<div style="position: relative; width: 240px; height: 200px; display: inline-block; margin-right: 32px;">
<!-- only for example styling end-->

  <div class="e-popup-panel e-popup-panel-info">
    <div class="e-popup-panel__header">
    <strong>Popup Panel Header</strong>
    </div>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam hendrerit turpis quis
    <div class="e-popup-panel__footer">
      <div class="e-popup-panel__actions">
        <button class="e-popup-panel__action e-btn e-btn-borderless">Cancel</button>
        <button class="e-popup-panel__action e-btn e-btn-primary">Apply</button>
      </div>
    </div>
  </div>

<!-- only for example styling -->
  </div>
<!-- only for example styling end -->

<!-- only for example styling -->
<div style="position: relative; width: 240px; height: 200px; display: inline-block; margin-right: 32px;">
<!-- only for example styling end -->

  <div class="e-popup-panel e-popup-panel-success">
    <div class="e-popup-panel__header">
      <strong>Popup Panel Header</strong>
    </div>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam hendrerit turpis quis
    <div class="e-popup-panel__footer">
      <div class="e-popup-panel__actions">
        <button class="e-popup-panel__action e-btn e-btn-borderless">Cancel</button>
        <button class="e-popup-panel__action e-btn e-btn-primary">Apply</button>
      </div>
    </div>
  </div>

<!-- only for example styling -->
</div>
<!-- only for example styling end-->


<!-- only for example styling -->
<div style="position: relative; width: 240px; height: 200px; display: inline-block; margin-right: 32px;">
<!-- only for example styling end -->

  <div class="e-popup-panel e-popup-panel-warning">
    <div class="e-popup-panel__header">
      <strong>Popup Panel Header</strong>
    </div>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam hendrerit turpis quis
    <div class="e-popup-panel__footer">
      <div class="e-popup-panel__actions">
        <button class="e-popup-panel__action e-btn e-btn-borderless">Cancel</button>
        <button class="e-popup-panel__action e-btn e-btn-primary">Apply</button>
      </div>
    </div>
  </div>

<!-- only for example styling -->
</div>
<!-- only for example styling end-->

<!-- only for example styling -->
<div style="position: relative; width: 240px; height: 200px; display: inline-block; margin-right: 32px;">
<!-- only for example styling end -->

  <div class="e-popup-panel e-popup-panel-error">
    <div class="e-popup-panel__header">
      <strong>Popup Panel Header</strong>
    </div>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam hendrerit turpis quis
    <div class="e-popup-panel__footer">
      <div class="e-popup-panel__actions">
        <button class="e-popup-panel__action e-btn e-btn-borderless">Cancel</button>
        <button class="e-popup-panel__action e-btn e-btn-primary">Apply</button>
      </div>
    </div>
  </div>

<!-- only for example styling -->
</div>
<!-- only for example styling end-->
<div class="e-popup-panel" style="max-height: 200px;">
  <div class="e-popup-panel__scrollarea">
    <p style="max-width: 320px;">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam hendrerit turpis quis interdum porttitor. Nam luctus enim eget nibh porta, et porttitor ipsum accumsan. Nam dictum augue vitae est efficitur, sed interdum eros rhoncus. Sed id libero elit. In molestie mauris tincidunt, aliquet urna eu, convallis ex. Sed dolor velit, molestie at auctor ac, sagittis et magna. Nulla ut ullamcorper lorem, in vehicula massa. Fusce nisi urna, fringilla vel lobortis lobortis, lacinia imperdiet sem. Integer interdum ullamcorper quam, eget gravida ex ultricies eget. Nulla ullamcorper augue mi, eu pulvinar ante placerat in. Quisque sit amet euismod est. Donec elementum iaculis tortor quis posuere. Nunc sit amet quam dui. Sed ante urna, efficitur at ante vel, porta tincidunt eros. Cras non elit laoreet, finibus enim et, tempus purus.
    </p>
  </div>
</div>
<style>
  .my-popup-panel {
    max-height: 300px;
  }
</style>
<button class="e-btn e-btn-primary" type="button" id="opener">
  Open Popup
</button>
<!-- The `e-popup-content` class is automatically added by the popup utility  -->
<div id="content" class="my-popup-panel">
  <div class="e-popup-panel__header">
    <strong>Popup Panel Header</strong>
  </div>
  <div class="e-popup-panel__scrollarea">
    <p style="max-width: 320px;">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam hendrerit turpis quis interdum porttitor. Nam luctus enim eget nibh porta, et porttitor ipsum accumsan. Nam dictum augue vitae est efficitur, sed interdum eros rhoncus. Sed id libero elit. In molestie mauris tincidunt, aliquet urna eu, convallis ex. Sed dolor velit, molestie at auctor ac, sagittis et magna. Nulla ut ullamcorper lorem, in vehicula massa. Fusce nisi urna, fringilla vel lobortis lobortis, lacinia imperdiet sem. Integer interdum ullamcorper quam, eget gravida ex ultricies eget. Nulla ullamcorper augue mi, eu pulvinar ante placerat in. Quisque sit amet euismod est. Donec elementum iaculis tortor quis posuere. Nunc sit amet quam dui. Sed ante urna, efficitur at ante vel, porta tincidunt eros. Cras non elit laoreet, finibus enim et, tempus purus.
    </p>
  </div>
  <div class="e-popup-panel__footer">
    <div class="e-popup-panel__actions">
      <button class="e-popup-panel__action e-btn e-btn-borderless">
        Edit
      </button>
    </div>
  </div>
</div>
Copy Javascript
Copied to clipboard! 
document.getElementById('opener').addEventListener('click', () => popup.toggle());

const popup = window.e.utils.createPopup(
  document.getElementById('opener'),
  document.getElementById('content'),
  { placement: 'right' }
);