Nutritious Pumpkin Masses

    @yuki0410/minimal-modal
    TypeScript icon, indicating that this package has built-in type declarations

    2.1.7 • Public • Published

    MinimalModal.js

    licence npm minified size dependencies downloads

    Minimal and Tiny Javascript Library for Modal Dialog


    The aim of this library is to easily introduce a minimalistic modal dialog. It is a library of only about 18KB.

     

    Features

    Toggles aria-hidden attributes & open attributes on open and close

    Closes dialog on overlay click or ESC press

    Traps tab focus within the modal (Dependent on focus-trap)

    Lock the scrolling outside the modal (Dependent on body-scroll-lock)

    Make By Typescript

    Supported for IE11+

     

    Install

    via npm

    npm install @yuki0410/minimal-modal --save
    // Common.JS
    const MinimalModal = require('@yuki0410/minimal-modal');
    
    // ESModules
    import MinimalModal from '@yuki0410/minimal-modal';

    via CDN direct link

    <script src="https://cdn.jsdelivr.net/npm/@yuki0410/minimal-modal/dist/minimal-modal.min.js"></script>

    direct download

    curl -o https://cdn.jsdelivr.net/npm/@yuki0410/minimal-modal/dist/minimal-modal.min.js
    <script src="/path/to/minimal-modal.min.js"></script>

     

    Automatic Usage

    <!-- show trigger -->
    <button data-modal-show="#modal-1">
    
    <!-- close trigger -->
    <button data-modal-close>
    // activate
    MinimalModal.activate();
    
    // deactivate
    MinimalModal.deactivate();

    demo

    MinimalModal.activate();

    Active Show / Close Modal Triggers.

    MinimalModal.deactivate();

    Deactive Show / Close Modal Triggers.

    Manual Usage

    const modal = document.querySelector('#someModal');
    
    // open
    MinimalModal.show(modal);
    
    // close
    MinimalModal.close();
    
    // closeAll
    MinimalModal.closeAll();

    demo

    MinimalModal.show(element[, modalOptions]);

    Show Modal.

    element: HTMLElement

    modalOptions

    MinimalModal.close();

    Close Active Modal.

    MinimalModal.closeAll();

    Close All Models.

     

    Changelog

    Refer to the releases page.

     

    Contribution

    1. Fork the repository on GitHub
    2. Clone the project to your own machine
    3. Commit changes to your own branch
    4. Push your work back up to your fork
    5. Submit a Pull request so that we can review your changes

    NOTE: Be sure to merge the latest from "upstream" before making a pull request!

     

    Licence

    This project is licensed under MIT license.

     

    Created and maintained by

    @yuki0410_ 🇯🇵

    Install

    npm i @yuki0410/minimal-modal

    DownloadsWeekly Downloads

    2

    Version

    2.1.7

    License

    MIT

    Unpacked Size

    392 kB

    Total Files

    8

    Last publish

    Collaborators

    • yuki0410