Link copied!

Create Popup

Usage

Name Description
window.e.utils.v2.ui.createPopup(openerElement, contentElement, options) Returns a popup object that has open, close, toggle methods.

Parameters

Name Description Type Required Default value
openerElement handler HTMLElement yes
contentElement content of the popup HTMLElement yes
options Options yes

Method Reference

Name Description
open Open the popup panel
close Close the popup panel
toggle Toggle the popup panel

Options

Name Description Default value
placement Where to try to open content in relation to opener 'bottom'
arrow Toggles arrow rendering true
offset Determines distance between reference and content 12
noPadding Disables padding on popup false
closeOnOutsideClick Closes on clicking anywhere but on the content true
closeOnEscPress Closes by pressing ESC key true
autoClose Automatically closes the popup after a timeout false
elementToFocusOnOpen Determines to which HTMLElement should be in focus after open null
elementToFocusOnClose Determines to which HTMLElement should be in focus after close opener
loopFocus Makes focus to jump back to the start instead of closing the popup false
matchOpenerWidth Sets the width of contentElement to the same as openerElement dynamically false
type Sets the type of the popup (info, warning, success, error) ''
onBeforeOpen Function to run before internal open logic (opener, content) => {}
onAfterOpen Function to run after internal open logic (opener, content) => {}
onBeforeClose Function to run before internal close logic (opener, content) => {}
onAfterClose Function to run after internal close logic (opener, content) => {}
onOutsideClickClose Function to run after the popup was closed by clicking outside (opener, content) => {}
onEscPressClose Function to run after the popup was closed by an escape press (opener, content) => {}
onFocusOutForward Function to run if the popup is closed by forward tabbing (opener, content) => {}
onFocusOutBackward Function to run if the popup is closed by backward tabbing (opener, content) => {}

Examples

<button class="e-btn e-btn-primary" type="button" id="opener">
  Open Popup
</button>
<div id="content">
  <p>Content of the custom popup.</p>
  <div class="e-popup-panel__footer">
    <div class="e-popup-panel__actions">
      <button class="e-btn e-btn-primary e-popup-panel__action" type="button">
        Close
      </button>
    </div>
  </div>
</div>
Copy Javascript
Copied to clipboard! 
document.getElementById('content').querySelector('button').addEventListener('click', () => popup.close());
document.getElementById('opener').addEventListener('click', () => popup.toggle());

const popup = window.e.utils.v2.ui.createPopup(
  document.getElementById('opener'),
  document.getElementById('content'),
  {
    closeOnOutsideClick: false,
    closeOnOEscPress: false,
    placement: 'right',
    elementToFocusOnOpen: document.getElementById('content').querySelector('button')
  }
);
<button class="e-btn e-btn-primary" type="button" id="opener">
  Open Popup
</button>
<div id="content">
  <p>Content of the custom popup.</p>
  <div class="e-popup-panel__footer">
    <div class="e-popup-panel__actions">
      <button class="e-btn e-btn-primary e-popup-panel__action" type="button">
        Close
      </button>
    </div>
  </div>
</div>
Copy Javascript
Copied to clipboard! 
document.getElementById('content').querySelector('button').addEventListener('click', () => popup.close());
document.getElementById('opener').addEventListener('click', () => popup.toggle());

const popup = window.e.utils.v2.ui.createPopup(
  document.getElementById('opener'),
  document.getElementById('content'),
  {
    closeOnOutsideClick: false,
    closeOnOEscPress: false,
    placement: 'right',
    elementToFocusOnOpen: document.getElementById('content').querySelector('button'),
    type: 'success'
  }
);