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

    hut-modalpublic

    hut-modal

    Build Status Dependency Status

    Selenium Test Status

    intro

    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.

    usage

    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');

    code

    <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();

    reference

    modal(element)

    Creates a new Modal object that manages the modal specified by element. The element must have a similar structure as the example above.

    #show()

    Shows the modal. Note that the element must be already attached to the document for it to be shown.

    #hide()

    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.

    Keywords

    none

    install

    npm i hut-modal

    Downloadsweekly downloads

    22

    version

    0.1.1

    license

    none

    repository

    githubgithub

    last publish

    collaborators

    • avatar