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:
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.