Nightly Piano Man


    1.1.2 • Public • Published

    Happy Modals · GitHub license npm version

    Happy Modals allows developers a stress-free experience of implementing modals (aka dialogs).

    • Barebones: Almost no pre-applied styling; you control how your modals look and feel.
    • Accessibility: Manually tested on all major devices against all major browser engines and major assistant technologies.
    • Dumb-Simple: Can't imagine anything simpler than this package, jump to example code.

    Learn how to use Happy Modals.

    Lite vs Standard version

    The lite version has the most barebone features with the easiest setup and developer experience. Lite version is written in vanilla JavaScript. All versions include

    • custom modal backdrop
    • custom open/close buttons
    • automatic scroll-lock
    • automatic backdrop/close buttons

    Unlike the lite version, the standard version exposes granular controls over the modal, as well as more features. The only requirement being that you are using one of the compatible frameworks. Standard version is currently only available for Svelte.

    • dynamically render/import components
    • lifecycle hooks (before/after open/close)
    • exposes close function
    • fixed position and sticky position


    There is nothing out there (..yet) that gets any easier than this.

    Example Code

    The bare-minimum required to get a modal up and running.

    Simple Lite Version

    <div class="modal-open"/> 
    <div role="dialog"/>

    Simple Standard Version

    for Svelte
        <div slot="button"/>
        <div slot="modal"/>

    See live examples at:


    Start now at!

    There are two different versions of Happy Modals, a lite version and a standard version. You can access any version of the documentation by the "version" toggle on the upper-right-hand corner of the website.

    The documentation for each version is divided into 3 sections:

    You can improve it by sending pull requests to the same repository.


    Open to proposals with crazy changes, expect lengthy discussions. This is a relatively small project, so there are currently no strict templates and rules.

    Just use the following keywords for their respective changes:

    • [DOCS]
    • [PATCH]
    • [UPDATE]
    • [BREAKING]

    Note that official npm releases abide by semantic versioning, see changelog for the complete record.

    Code of Conduct

    Happy Modals has adopted a Code of Conduct that we expect project participants to adhere to. Please read the full text so that you can understand what actions will and will not be tolerated.


    Happy Modals is Apache 2.0 licensed.


    npm i happymodals

    DownloadsWeekly Downloads






    Unpacked Size

    46.9 kB

    Total Files


    Last publish


    • byjackli