├── .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 | 37 | ``` 38 | 39 | ### Example markup 40 | ```html 41 | 85 | ``` 86 | 87 | ## Animations 88 | You can control overlay and the div wrapper animations using TailwindCSS classes via: 89 | 90 | - Leaving screen: `data-class-out` and `class` 91 | - Entering screen: `data-class-in` 92 | 93 | ```html 94 |
99 |
103 | 104 | ``` 105 | 106 | ## Initialize 107 | ```javascript 108 | modal.init() 109 | ``` 110 | 111 | ## Methods 112 | 113 | openModal() 114 | ```javascript 115 | modal.openModal('modal-name'); 116 | ``` 117 | 118 | closeModal() 119 | ```javascript 120 | modal.closeModal('modal-name'); 121 | ``` 122 | 123 | ### Quick start: Installation 124 | Copy/paste and use. 125 | 126 | ## Copyright and license 127 | Copyright 2021 Tomasz Bujnowicz under the [MIT license](http://opensource.org/licenses/MIT). 128 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Modal | Vanilla JS TailwindCSS Component 8 | 9 | 10 | 11 | 12 | 13 |
14 | 21 |
22 | 23 | 74 | 75 | 76 |
77 | 82 |
83 | 84 | 130 | 131 | 132 |
133 | 140 |
141 | 142 | 188 | 189 | 190 |
191 | 198 |
199 | 200 | 250 | 251 | 552 | 553 | 554 | 555 | --------------------------------------------------------------------------------