≡ MODI

constructor Object: config, Boolean: initialize

• config: optional. Modal configuration.
• initialize: optional. Sets whether the modal has to be initialized. Default: true.

Properties

config

Configuration object.

template

Template config.

content

Get/set content. Requires content element.

Methods

show String: contents, Boolean: runDefault

Shows the modal.

• contents: optional. Contents to show.
• runDefault: optional. Defines when the default method will be called. By default false, so the template method has preference when its defined.

Dispatches modal:show event.

Inside template, the method definition will be String: contents, Modi: instance.

hide Boolean: runDefault

Hides the modal.

• runDefault: optional. Defines when the default method will be called. By default false, so the template method has preference when its defined.

Dispatches modal:hide event.

Inside template, the method definition will be Modi: instance.

relocate

Sets small-width and small-height flags, and it’s triggered on window resize.

Dispatches modal:relocate event.

create String: contents

Initialize the modal. Appends elements to the DOM and attaches listeners. Triggered on instantiation by default.

remove

Removes the elements and the listeners.

element String: name

Returns the specified template element. undefined otherwise.

isVisible

Check if the modal is visible.

addListener String: type, EventListener: listener, Element: element

Adds specified event listener and stores it inside listeners collection.

• type: Event type.
• listener: Event handler.
• element: optional. Target element. Default: first template’s element.

myModal.addListener('modal:show', (e) => {
  console.log('show dispatched!');
});

Events

Dispatched events have the detail property, which contains:

• instance: modal’s instance.
• overlay: overlay element.
• modal: modal element.

myModal.addListener('modal:hide', (e) => {
  console.log(e.detail.instance);
});

show

Triggered when the modal is shown.

hide

Triggered when the modal hides.

relocate

Triggered on window resize and relocate method call.

Events collection can be extended using template events.