Modal Vanilla

Modal Dialog window written in raw ES6 JavaScript. Functionally and visually
compatible with Bootstrap framework.

This Modal implementation is fairly opinionated and in most cases could be used
as it is. However in cases where design or some functionality has to be modified
it should be possible via Modal instance patching.

Examples

View live examples here.

Usage

Via JavaScript

Unlike similar modals in Bootstrap, Modal Vanilla has to be instantiated and
displayed manually from JavaScript instead of having such functionality as toggling via data-toggle attribute.

Static

Within the page you'll have an HTML of the modal that you want to display. In this
case element should have an my-modal ID.

var myModal = new Modal({
  el: document.getElementById('my-modal')
});
myModal.show();

// OR

var myModal = new Modal({
  el: document.getElementById('my-modal')
}).show();

Dynamic

It is possible to include some custom content without specifying actual HTML
element. When Modal can't be attached to DOM element it will be constructed
dynamically.

var myModal = new Modal({
  title: 'My Modal Dialog',
  content: 'This is a dynamic content for the modal injected from JS'
}).show();

Presets

Modal Vanilla has two ready-to-use presets: Alert and Confirm.

Alert is used to display some message to the user and gives user option to
close that modal with single button "OK".
Confirm is used to display some prompt to the user with two buttons: "OK" and "Cancel".

In both presets when user clicks on the button Modal Vanilla would fire an event
dismiss which you can listen to. This event gives you an option to access
modal itself, browser event that led to dismiss (click, keydown) and if dismiss
was fired via one of the buttons - specific button.

Options

| Name | Type | Default | Description | | ---- | ---- | ------- | ----------- | | el | DOM Node or null | null | Existing DOM element that will be 'Modal-ized'. | | animate | boolean | true | Show Modal using animation. | | appendTo | string | 'body' | DOM element selector to which constructed Modal will be appended. | | backdrop | boolean or the string 'static' | true | Show Modal backdrop bocking content. If static is set - modal won't be closed on backdrop click | | keyboard | boolean | true | Close modal on esc key. | | title | string or DOM Node | 'Dialog' | Content of the title in the constructed dialog. | | header | boolean | true | Flag specifying whether header of the constructed dialog should be rendered | | content | boolean, string or DOM Node | false | Specify content that you want to display in the content area of the dialog | | footer | boolean, string or DOM Node | true | Specify whether you want to see footer and what kind of footer. When set to true would show a single "OK" button. | | headerClose | boolean | true | Show close button in the header. | | construct | boolean | false | Force modal type - if set to true Modal would be constructed dynamically. | | transition | integer | 300 | How much time in ms it takes to show the modal. | | backdropTransition | integer | 150 | How much time in ms it takes to show backdrop. |

Methods

.show()
Shows modal instance. Returns instance itself.

var myModal = new Modal({
  el: document.getElementById('my-modal')
});
myModal.show();

.hide()
Hides modal instance. Returns instance itself.

var myModal = new Modal({
  el: document.getElementById('my-modal')
}).show();
myModal.hide();

Events

Modal Vanilla uses standard node.js EventEmitter and therefore supports such
event as: 'on', 'once', 'removeAllListeners', 'removeListener'.

For more details on EventEmitter, please check official documentation page.
Available events are:

| Event Type | Description | | ---------- | ----------- | | show | This event fires immediately after .show() method is called. | | shown | This event is fired after Modal has been fully shown - with default options that would happen after 300ms. | | hide | This event fires ately after .hide() method is called and immediately after user dismisses modal via button or keydown. | | hidden | This event is fired after modal has been completely hidden. | | dismiss | This event fires iately after user clicks either on one of the buttons tat can close modal, on close element in the header, on backdrop if it is set to default behavior and after user hits "Esc" on the keyboard. |

var myModal = new Modal({
  content: 'My Custom Content'
});
myModal.on('show', function(myModal, event) {
  // Do something before we start showing modal.
})