Home

Entities

• Triggers
• Hooks

Usage example

Example from demo page

var modalEl = document.querySelector('.modal');
var triggerBtnEl = document.querySelector('.btn_open');
var logsEl = document.querySelector('#logs');
var modalBody = modalEl.querySelector('.modal__body');

var mw = new Modal(modalEl);

mw.addTrigger(triggerBtnEl, 'click');

let logFunction = function(e) {
	let now = new Date;
	let date = formatDate(now);
	let time = formatTime(now);
	let p = document.createElement('p');
	p.classList.add('log__item');
	p.title = `Event type "${e.type}" happen because of "${e.detail.type}"`;
	p.innerHTML = `[${date} ${time}] <b>${e.type}</b>`;

	console.log(e);
	logsEl.prepend(p);
};

mw.beforeOpen(logFunction);
mw.onOpen(logFunction);
mw.opened(function (e) {
	logFunction(e);
	modalBody.innerHTML = logsEl.innerHTML;
});
mw.beforeClose(function(e) {
	logFunction(e);
	modalBody.innerHTML = logsEl.innerHTML;
});
mw.onClose(logFunction);
mw.closed(logFunction);

mw.open(function(modal, el, open) {
	setTimeout(function () {
		open();
	}, 500);
}, function(modal, el, close) {
	setTimeout(function () {
		close();
	}, 2000);
});