Class Popup

Configures the given element as a Popup widget.

The Popup widget sets up the given element to be hidden and open in a floating popup upon activation. Activation can be done manually by calling open or when clicking on any of the given triggers.

IMPORTANT: The popup is positioned absolutely in its container and the position is relative to the container. The container gets width: fit-content by default but you can override this in your CSS. The popup also gets a configurable min-width set.

IMPORTANT: You should not instantiate more than one Openable widget, regardless of type, on a given element. Use Openable.get to get an existing instance if any. If there is already an Openable widget of any type on this element, it will be destroyed!

You can use the following dynamic attributes or CSS properties in your stylesheet:

The following dynamic attributes are set on the root element that is created by LISN and has a class lisn-popup__root:

  • data-lisn-is-open: "true" or "false"
  • data-lisn-place: the actual position (top, bottom, left, top-left, etc)

The following dynamic attributes are set on each trigger:

  • data-lisn-opens-on-hover: "true"or"false"`

To use with auto-widgets (HTML API) (see settings.autoWidgets), the following CSS classes or data attributes are recognized:

  • lisn-popup class or data-lisn-popup attribute set on the element that holds the content of the popup
  • lisn-popup-trigger class or data-lisn-popup-trigger attribute set on elements that should act as the triggers. If using a data attribute, you can configure the trigger via the value with a similar syntax to the configuration of the openable widget. For example:
    • Set the attribute to "hover" in order to have this trigger open the popup on hover in addition to click.
    • Set the attribute to "hover|auto-close=false" in order to have this trigger open the popup on hover but and override PopupConfig.autoClose with true.

When using auto-widgets, the elements that will be used as triggers are discovered in the following way:

  1. If the content element has a data-lisn-popup-content-id attribute, then it must be a unique (for the current page) ID. In this case, the trigger elements will be any element in the document that has a lisn-popup-trigger class or data-lisn-popup-trigger attribute and the same data-lisn-popup-content-id attribute.
  2. Otherwise, the closest ancestor that has a lisn-popup-container class, or if no such ancestor then the immediate parent of the content element, is searched for any elements that have a lisn-popup-trigger class or data-lisn-popup-trigger attribute and that do not have a data-lisn-popup-content-id attribute, and that are not children of the content element.

See below examples for what values you can use set for the data attributes in order to modify the configuration of the automatically created widget.

Example

This defines a simple popup with one trigger.

<div>
  <div class="lisn-popup-trigger">Open</div>
  <div class="lisn-popup">
    Some content here...
  </div>
</div>

Example

This defines a popup that has a close button, and where the trigger is in a different parent to the content.

<div>
  <div data-lisn-popup-content-id="popup"
       data-lisn-popup="close-button">
    Lorem ipsum odor amet, consectetuer adipiscing elit. Etiam duis viverra
    faucibus facilisis luctus. Nunc tellus turpis facilisi dapibus aliquet
    turpis. Diam potenti egestas dolor auctor nostra vestibulum. Tempus
    auctor quis turpis; pulvinar ante ultrices. Netus morbi imperdiet
    volutpat litora tellus turpis a. Sociosqu interdum sodales sapien nulla
    aptent pellentesque praesent. Senectus magnis pellentesque; dis porta
    justo habitant.
  </div>
</div>

<div>
  <div data-lisn-popup-content-id="popup" class="lisn-popup-trigger">
    Open
  </div>
</div>

Example

As above, but with all possible configuration settings set explicitly.

<div>
  <div data-lisn-popup-content-id="popup" class="lisn-popup-trigger">
    Open
  </div>
</div>

<div>
  <div data-lisn-popup-content-id="popup"
       data-lisn-popup="close-button | position=bottom | auto-close=false">
    Lorem ipsum odor amet, consectetuer adipiscing elit. Etiam duis viverra
    faucibus facilisis luctus. Nunc tellus turpis facilisi dapibus aliquet
    turpis. Diam potenti egestas dolor auctor nostra vestibulum. Tempus
    auctor quis turpis; pulvinar ante ultrices. Netus morbi imperdiet
    volutpat litora tellus turpis a. Sociosqu interdum sodales sapien nulla
    aptent pellentesque praesent. Senectus magnis pellentesque; dis porta
    justo habitant.
  </div>
</div>

Hierarchy (View Summary)

Methods

get register

Constructors

constructor

Properties

close destroy disable enable getContainer getElement getRoot getTriggerConfigs getTriggers isDestroyed isDisabled isOpen onClose onDestroy onDisable onEnable onOpen open toggle toggleEnable

Methods

Staticget

  • get(element: Element): null | Openable

    Retrieve an existing widget by its content element or any of its triggers.

    If the element is already part of a configured Openable widget, the widget instance is returned. Otherwise null.

    Note that trigger elements are not guaranteed to be unique among openable widgets as the same element can be a trigger for multiple such widgets. If the element you pass is a trigger, then the last openable widget that was created for it will be returned.

    Parameters

    • element: Element

    Returns null | Openable

Staticregister

Constructors

constructor

Properties

Readonlyclose

close: () => Promise<void>

Closes the widget.

Readonlydestroy

destroy: () => Promise<void>

Undoes all modifications to the element and returns it to its original state.

You will need to recreate it if you want to enable its functionality again.

Readonlydisable

disable: () => Promise<void>

Disables the functionality of the widget. What this means is specific to each widget.

Readonlyenable

enable: () => Promise<void>

Re-enables the functionality of the widget. What this means is specific to each widget.

ReadonlygetContainer

getContainer: () => null | HTMLElement

Returns the element that was found to be the container. It is the closest ancestor that has a lisn-collapsible-container class, or if no such ancestor then the immediate parent of the content element.

ReadonlygetElement

getElement: () => Element

Returns the element passed to the widget constructor.

ReadonlygetRoot

getRoot: () => HTMLElement

Returns the root element created by us that wraps the original content element passed to the constructor. It is located in the content element's original place.

ReadonlygetTriggerConfigs

getTriggerConfigs: () => Map<Element, OpenableTriggerConfig>

Returns the trigger elements along with their configuration.

ReadonlygetTriggers

getTriggers: () => Element[]

Returns the trigger elements, if any. Note that these may be wrappers around the original triggers passed.

ReadonlyisDestroyed

isDestroyed: () => boolean

Returns true if the widget is destroyed.

ReadonlyisDisabled

isDisabled: () => boolean

Returns true if the widget is currently disabled.

ReadonlyisOpen

isOpen: () => boolean

Returns true if the widget is currently open.

ReadonlyonClose

onClose: (handler: WidgetHandler) => void

The given handler will be called when the widget is closed.

If it returns a promise, it will be awaited upon.

ReadonlyonDestroy

onDestroy: (handler: WidgetHandler) => void

The given handler will be called when the widget is destroyed.

ReadonlyonDisable

onDisable: (handler: WidgetHandler) => void

The given handler will be called when the widget is disabled.

ReadonlyonEnable

onEnable: (handler: WidgetHandler) => void

The given handler will be called when the widget is enabled.

ReadonlyonOpen

onOpen: (handler: WidgetHandler) => void

The given handler will be called when the widget is open.

If it returns a promise, it will be awaited upon.

Readonlyopen

open: () => Promise<void>

Opens the widget unless it is disabled.

Readonlytoggle

toggle: () => Promise<void>

Closes the widget if it is open, or opens it if it is closed (unless it is disabled).

ReadonlytoggleEnable

toggleEnable: () => Promise<void>

Re-enables the widget if disabled, otherwise disables it.

Settings

Member Visibility

On This Page

Methods
Constructors
Properties