Happy Modals ·

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

Installation

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

• Test out examples to see how simple it is.
• Add Happy Modals in a few simple steps.
• See how it works behind the scenes.

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
<Modal>
    <div slot="button"/>
    <div slot="modal"/>
</Modal>

See live examples at: https://happymodals.com/docs/examples.

Documentation

Start now at happymodals.com/docs!

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:

• How it Works
• Examples
• Installation

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

Contributing

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.

License

Happy Modals is Apache 2.0 licensed.