modal-vanilla

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.
})