node package manager
Share your code. npm Orgs help your team discover, share, and reuse code. Create a free org »



Build Status Dependency Status

Selenium Test Status


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.

Event: show()

Triggered immediately after the modal is shown.

Event: hide()

Triggered immediately after the modal is hidden.

Event: result(value)

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.