Interface ModalConfig

interface ModalConfig {
    autoClose?: boolean;
    className?: string | string[];
    closeButton?: boolean;
    id?: string;
    triggers?: Element[] | Map<Element, null | OpenableTriggerConfig>;
}

Properties

autoClose?: boolean

Automatically close the modal when clicking outside it or pressing Escape. Furthermore, if any trigger opens the widget on OpenableTriggerConfig.hover, the widget will be closed when the pointer leaves both the trigger and the root.

If you set this to false, then you should ensure closeButton is enabled.

true
className?: string | string[]

Class name(s) or a list of class names of the modal. Will result in the top-level root element that's created by us getting these classes.

undefined
closeButton?: boolean

Add a close button at the top right.

true
id?: string

The DOM ID of the modal. Will result in the top-level root element that's created by us getting this ID.

Note, this does not replace or affect the data-lisn-modal-content-id attribute used to link triggers to the modal.

undefined
triggers?: Element[] | Map<Element, null | OpenableTriggerConfig>

The elements that open the widget when clicked on. You can also pass a map whose keys are the elements and values are OpenableTriggerConfig objects.

If not given, then the elements that will be used as triggers are discovered in the following way:

  1. If the content element has a data-lisn-modal-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-modal-trigger class or data-lisn-modal-trigger attribute and the same data-lisn-modal-content-id attribute.
  2. Otherwise, the closest ancestor that has a lisn-modal-container class, or if no such ancestor then the immediate parent of the content element, is searched for any elements that have a lisn-modal-trigger class or data-lisn-modal-trigger attribute and that do not have a data-lisn-modal-content-id attribute, and that are not children of the content element.
undefined