Skip to content

Lightweight JS frontend library for simple work with modal windows/dialogs/alerts

License

Notifications You must be signed in to change notification settings

tsybenko/modal.js

Repository files navigation

Modal.js

Demo

Documentation

Installation and running

First, clone library code and go inside it directory

git clone https://github.com/tsybenko/modal.js.git
cd modal.js

Second, install library dependencies

npm install

Third, run webpack development server. Server will running on http://127.0.0.1:4000

npm run start:dev

Usage example

HTML

<div class="modal">
  <div class="modal_header"></div>
  <div class="modal_body">
    <p>Test</p>
    <button class="btn-close">Close</button>
  </div>
  <div class="modal_footer"></div>
</div>
<button class="btn-modal">Open</button>

JS

var modalEl = document.querySelector('.modal');
var triggerBtnEl = document.querySelector('.btn-modal');

/**
 * "mw" as modal window
 */
var mw = new Modal(modalEl);

mw.addTrigger(triggerBtnEl, 'click');

mw.beforeClose(function(e) {
	console.log(e.type);
});

Releases

No releases published

Packages

No packages published