HTML UI Toolkit modal component


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.

  1. Install using npm - npm install --save hut-modal
  2. Import styling using rework-npm - @import "hut-modal";
  3. 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>
        <section class="modal-content">
            <p>See my modal?</p>
        <footer class="modal-footer">
            <button data-result="yes">Yes</button>
            <button data-result="no">No</button>
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?');

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.