For more details about the library, please check github page.
Static Modal is used for when you manually created Modal HTML in you webpage and now just want to show it.
It works very similar to the way Bootstrap Modal works. First you create an HTML:
<div id="static-modal" class="modal fade" tabindex="-1" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title">Modal title</h4>
</div>
<div class="modal-body">
<p>One fine body…</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary" data-dismiss="modal">OK</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
After that we need to add a bit of the JavaScript which would actually show the modal. There are plans to introduce Bootrstap-like toggles.
document.querySelector('.js-static-modal-toggle').addEventListener('click', function() {
new Modal({el: document.getElementById('static-modal')}).show();
});
Code above would attach an event listener to our button here, so that when you click it Modal will be show.
Besides using pre-existing HTML as a content for Modal you can dynamicallt generate Modal in JavaScript using several options.
document.querySelector('.js-dynamic-modal-toggle').addEventListener('click', function() {
// Here we create our dynamic modal
new Modal({
title: 'Hooray!'
content: 'My Very Dynamic Modal Content'
}).show();
});
In addition to dynamic modal generation Modal Vanilla also contains couple of presets so that you don't need to generate content manually.
Presets are: Alert and Confirm Modals. Here's how to call them:
document.querySelector('.js-alert-modal-toggle').addEventListener('click', function() {
// Here we create our dynamic modal
Modal.alert('My Custom Alert').show();
});
document.querySelector('.js-confirm-modal-toggle').addEventListener('click', function() {
// Here we create our dynamic modal
var cfrm = Modal.confirm('Are you sure?');
// Listen for `hide` event.
cfrm.on('hide', function() {
alert('Triggered hide event.');
});
// Listen for `hidden` event.
cfrm.on('hidden', function() {
alert('Modal is hidden.');
});
cfrm.show();
});
When you hit "Close" or "OK" button, modal will be closed, while it is doing so it will emit "dismiss" event which you can listen to. While listening you can detect which button in the confirm or alert modal was clicked and act accordingly.
document.querySelector('.js-confirm-modal-toggle').addEventListener('click', function() {
// Here we create our dynamic modal
var confirmModal = Modal.confirm('My Custom Alert');
confirmModal.show().once('dismiss', function(modal, ev, button) {
if (button && button.value) {
alert("You've clicked on an OK button.");
}
});
});