https://github.com/tomaszbujnowicz/vanilla-js-tailwindcss-modal
A dependency-free Vanilla JS TailwindCSS modal and drawer. No dependencies, no automation build tools.
https://github.com/tomaszbujnowicz/vanilla-js-tailwindcss-modal
drawer drawers javascript modal modal-dialog modals vanilla-javascript vanilla-js
Last synced: 11 months ago
JSON representation
A dependency-free Vanilla JS TailwindCSS modal and drawer. No dependencies, no automation build tools.
- Host: GitHub
- URL: https://github.com/tomaszbujnowicz/vanilla-js-tailwindcss-modal
- Owner: tomaszbujnowicz
- Created: 2021-11-03T14:58:48.000Z (over 4 years ago)
- Default Branch: main
- Last Pushed: 2023-03-28T18:20:33.000Z (over 3 years ago)
- Last Synced: 2025-04-09T07:41:29.733Z (about 1 year ago)
- Topics: drawer, drawers, javascript, modal, modal-dialog, modals, vanilla-javascript, vanilla-js
- Language: HTML
- Homepage: https://tomaszbujnowicz.github.io/vanilla-js-tailwindcss-modal/
- Size: 46.9 KB
- Stars: 19
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 🚀 Modal | Vanilla JS TailwindCSS Component
A simple, accessible modal script.
## Requirements
No Node.js, Yarn, NPM, Webpack, Gulp, React, Vue.js etc... just a browser.
## Features
- Vanilla JavaScript
- TailwindCSS
- ARIA attributes
- Data attributes used for JS functionality (semantic and flexible markup)
- Trap focus
- Auto focus on input fields when the modal is opened
- Close a modal with Escape key
- Can be used for multiple modals
## Usage
Trigger via data attributes
```html
Open modal
```
Trigger via a tag
```html
Open from a tag link
```
### Example markup
```html
Headline
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rem in aliquid nulla, sed veritatis, officiis ea aut natus quas voluptates perferendis ratione modi ab qui omnis cum labore alias eos.
Close Modal
or [esc] key
```
## Animations
You can control overlay and the div wrapper animations using TailwindCSS classes via:
- Leaving screen: `data-class-out` and `class`
- Entering screen: `data-class-in`
```html
```
## Initialize
```javascript
modal.init()
```
## Methods
openModal()
```javascript
modal.openModal('modal-name');
```
closeModal()
```javascript
modal.closeModal('modal-name');
```
### Quick start: Installation
Copy/paste and use.
## Copyright and license
Copyright 2021 Tomasz Bujnowicz under the [MIT license](http://opensource.org/licenses/MIT).