├── .editorconfig ├── README.md └── index.html /.editorconfig: -------------------------------------------------------------------------------- 1 | # editorconfig.org 2 | root = true 3 | 4 | # All Files 5 | [*] 6 | indent_style = space 7 | indent_size = 2 8 | tab_width = 2 9 | end_of_line = lf 10 | charset = utf-8 11 | trim_trailing_whitespace = true 12 | insert_final_newline = true 13 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # 🚀 Modal | Vanilla JS TailwindCSS Component 2 | 3 | A simple, accessible modal script. 4 | 5 | ## Requirements 6 | No Node.js, Yarn, NPM, Webpack, Gulp, React, Vue.js etc... just a browser. 7 | 8 | ## Features 9 | - Vanilla JavaScript 10 | - TailwindCSS 11 | - ARIA attributes 12 | - Data attributes used for JS functionality (semantic and flexible markup) 13 | - Trap focus 14 | - Auto focus on input fields when the modal is opened 15 | - Close a modal with Escape key 16 | - Can be used for multiple modals 17 | 18 | ## Usage 19 | 20 | Trigger via data attributes 21 | ```html 22 | 28 | ``` 29 | 30 | Trigger via a tag 31 | ```html 32 | 35 | Open from a tag link 36 | 37 | ``` 38 | 39 | ### Example markup 40 | ```html 41 |
71 | 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. 72 |
73 |55 | 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. 56 |
57 |115 | 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. 116 |
117 |173 | Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rem in aliquid nulla, sed veritatis, officiis ea aut 174 | natus quas voluptates perferendis ratione modi ab qui omnis cum labore alias eos. 175 |
176 |231 | Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rem in aliquid nulla, sed veritatis, officiis ea aut 232 | natus quas voluptates perferendis ratione modi ab qui omnis cum labore alias eos. 233 |
234 |