Minimal Dynamic Modal Dialog JavaScript Library – sv-modal

Preview:

Description:

sv-modal is a minimal clean modal dialog library that allows you to dynamically inject modal content in JavaScript.

How to use it:

1. Add the JavaScript sv-modal.js and Stylesheet sv-modal.css to the page.

<link rel="stylesheet" href="sv-modal.css" />
<script src="sv-modal.js"></script>

2. Create a new instance of the sv-modal.

var modal = new SV.Modal('my-modal');

3. Create a trigger element to launch the modal.

<a id="triggerLink" href="#">Launch</a>

4. Show the modal window and inject your own modal content as follows:

document.getElementById('triggerLink').addEventListener('click', function(ev) {
  ev.preventDefault();
  // inject modal content
  var html = '<p>Modal Content Here</p>';
  modal.inject(html, 'Modal Title Here');
  modal.show();
});

5. Dismiss the modal window manually.

modal.close();

6. Set the modal window to a specific size.

modal.resizeContent(width, height);

7. Get the modal information.

modal.getModalElement();
modal.getContentElement();
modal.getTitleElement();

8. Event handlers.

modal.getModalElement().addEventListener('sv.modal.close', function (ev) {
  // after the modal has been closed
});
modal.getModalElement().addEventListener('sv.modal.resize', function (ev) {
  // after the content has been resized
});