A simple HTML modal module that displays a simple dialog prompt. It contains a minimum amount of styling so that you can customize it to your needs. See the example to see it in action.
- Install using npm -
npm install --save hut-modal
- Import styling using rework-npm -
@import "hut-modal";
- Load JS using browserify -
var modal = require('hut-modal');
<div id="my-modal" class="hut-modal">
<div class="modal-dialog">
<header class="modal-header">
<h3>My Modal</h3>
</header>
<section class="modal-content">
<p>See my modal?</p>
</section>
<footer class="modal-footer">
<button data-result="yes">Yes</button>
<button data-result="no">No</button>
</footer>
</div>
</div>
var modal = require('hut-modal');
var m = modal(document.querySelector('#my-modal'));
// When a [data-result] element is clicked, it will hide the modal and trigger
// the result event:
m.on('result', function(result) {
if (result === "yes") {
console.log('Hey that was cool!');
} else if (result === "no") {
console.log('Wait, what?');
}
});
myModal.show();
Creates a new Modal
object that manages the modal specified by element
. The
element must have a similar structure as the example above.
Shows the modal. Note that the element must be already attached to the document for it to be shown.
Hides the modal.
Triggered immediately after the modal is shown.
Triggered immediately after the modal is hidden.
Triggered when an element with the data-result
attribute is clicked. The
modal will be automatically hidden and value
will be the value of the
data-result
attribute of the element that was clicked.