storm-modal

    1.2.1 • Public • Published

    Storm Modal

    npm version

    Accessible modal dialog.

    Example

    https://stormid.github.io/storm-modal

    Usage

    HTML

    <button class="js-modal-toggler">Open modal</button>
    <div class="js-modal modal" data-modal-toggler="js-modal-toggler">
        <div class="modal__close js-modal-close js-modal-toggler" aria-label="close">
        </div>
        <div class="modal__inner"  role="dialog" aria-modal="true" aria-labelledby="modal-label">
            <h1 id="modal-label">Dialog label</h1>
            <button>Focusable element</button>
            <input type="text">
            <input type="text">
            <svg role="button" aria-label="close" tabindex="0" class="modal__close-btn js-modal-toggler" fill="#fff" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
                <path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"/>
                <path d="M0 0h24v24H0z" fill="none"/>
            </svg>
        </div>
    </div>
    

    CSS

    .modal {
        position: absolute;
        overflow: hidden;
        width:	0;
        height:0;
        background-color: rgba(0,0,0,.9);
        top:0;
        left:0;
        opacity:0;
        visibility:hidden;
    }
    .modal.active {
        opacity:1;
        visibility: visible;
        overflow: auto;
        position: fixed;
        width: auto;
        height: auto;
        bottom: 0;
        right: 0;
        z-index: 9;
    }
    

    JS

    npm i -S storm-modal
    

    either using es6 import

    import Modal from 'storm-modal';
    
    Modal.init('.js-modal');
    

    aynchronous browser loading (use the .standalone version in the /dist folder)

    import Load from 'storm-load';
    
    Load('/content/js/async/storm-modal.standalone.js')
        .then(() => {
            StormModal.init('.js-modal');
        });
    

    Options

    {
        onClassName:'active',
        mainSelector: 'main',
        modalSelector: 'js-modal',
        callback: false
    }
    

    e.g.

    StormModal.init('.js-modal', {
        callback(){
            console.log(this);
        }
    });
    

    Tests

    npm run test
    

    Browser support

    This is module has both es6 and es5 distributions. The es6 version should be used in a workflow that transpiles.

    The es5 version depends upon Object.assign so all evergreen browsers are supported out of the box, ie9+ is supported with polyfills. ie8+ will work with even more polyfils for Array functions and eventListeners.

    Dependencies

    None

    License

    MIT

    Install

    npm i storm-modal

    DownloadsWeekly Downloads

    25

    Version

    1.2.1

    License

    MIT

    Unpacked Size

    17.1 kB

    Total Files

    9

    Last publish

    Collaborators

    • sarah-storm
    • mjbp
    • stormid-admin
    • lynchjames