Nebulae Populate M83

    @apatheticwes/modal

    0.2.1 • Public • Published

    Modal

    A simple, quick, and accessible modal.

    Overview

    There are several ways to trigger the modal (ie. programmatically, or via a click Event), as well as to dismiss the modal (programmatically, mouse Events or the escape key). You can also easily customize the default CSS for a particular interaction.

    Getting Started

    With npm: npm i @apathetic/modal

    with git clone git@github.com:apathetic/modals.git

    There is an ES6 module you may consume however you wish. Then:

    <!-- modal -->
    <div id="terms" class="modal">
    	<div class="modal--content">
    		<i class="modal--close icon-close"></i>
    		<h3>Hello</h3>
    		<p>Random text here, something important.</p>
    	</div>
    </div>
    
    <!-- modal trigger -->
    <button data-modal="#terms">show</button>

    Methods

    method args description
    show() querySelector (String) shows the modal that is referenced by the given querySelector
    hide() - hides the currently-displaying modal
    bind() querySelector (String) programmatically binds modal functionality to an element

    Demo

    After cloning the repo:

    npm i
    npm start
    

    A server will spin up at http://localhost:8080, where you may play with the various examples.

    Support

    • IE9+
    • Safari / Chrome
    • Firefox
    • iOS
    • Android 4.0+

    Examples

    Please see the test / demo directory

    Release History

    0.1

    • first release

    Keywords

    Install

    npm i @apatheticwes/modal

    DownloadsWeekly Downloads

    1

    Version

    0.2.1

    License

    MIT

    Last publish

    Collaborators

    • apatheticwes