{"id":16596210,"url":"https://github.com/tomaszbujnowicz/vanilla-js-tailwindcss-modal","last_synced_at":"2025-08-11T02:07:22.683Z","repository":{"id":88155963,"uuid":"424268241","full_name":"tomaszbujnowicz/vanilla-js-tailwindcss-modal","owner":"tomaszbujnowicz","description":"A dependency-free Vanilla JS TailwindCSS modal and drawer. No dependencies, no automation build tools.","archived":false,"fork":false,"pushed_at":"2023-03-28T18:20:33.000Z","size":48,"stargazers_count":19,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-04-09T07:41:29.733Z","etag":null,"topics":["drawer","drawers","javascript","modal","modal-dialog","modals","vanilla-javascript","vanilla-js"],"latest_commit_sha":null,"homepage":"https://tomaszbujnowicz.github.io/vanilla-js-tailwindcss-modal/","language":"HTML","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/tomaszbujnowicz.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2021-11-03T14:58:48.000Z","updated_at":"2024-08-20T04:50:27.000Z","dependencies_parsed_at":null,"dependency_job_id":"82784270-2514-46a6-8f84-b3ac57affda2","html_url":"https://github.com/tomaszbujnowicz/vanilla-js-tailwindcss-modal","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/tomaszbujnowicz/vanilla-js-tailwindcss-modal","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tomaszbujnowicz%2Fvanilla-js-tailwindcss-modal","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tomaszbujnowicz%2Fvanilla-js-tailwindcss-modal/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tomaszbujnowicz%2Fvanilla-js-tailwindcss-modal/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tomaszbujnowicz%2Fvanilla-js-tailwindcss-modal/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/tomaszbujnowicz","download_url":"https://codeload.github.com/tomaszbujnowicz/vanilla-js-tailwindcss-modal/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tomaszbujnowicz%2Fvanilla-js-tailwindcss-modal/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":269819032,"owners_count":24480087,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-08-11T02:00:10.019Z","response_time":75,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["drawer","drawers","javascript","modal","modal-dialog","modals","vanilla-javascript","vanilla-js"],"created_at":"2024-10-11T23:52:37.631Z","updated_at":"2025-08-11T02:07:22.674Z","avatar_url":"https://github.com/tomaszbujnowicz.png","language":"HTML","funding_links":[],"categories":[],"sub_categories":[],"readme":"# 🚀 Modal | Vanilla JS TailwindCSS Component\n\nA simple, accessible modal script.\n\n## Requirements\nNo Node.js, Yarn, NPM, Webpack, Gulp, React, Vue.js etc... just a browser.\n\n## Features\n- Vanilla JavaScript\n- TailwindCSS\n- ARIA attributes\n- Data attributes used for JS functionality (semantic and flexible markup)\n- Trap focus\n- Auto focus on input fields when the modal is opened\n- Close a modal with Escape key\n- Can be used for multiple modals\n\n## Usage\n\nTrigger via data attributes\n```html\n\u003cbutton\n  data-modal-trigger\n  aria-controls=\"modal-name\"\n  aria-expanded=\"false\"\u003e\n  Open modal\n\u003c/button\u003e\n```\n\nTrigger via a tag\n```html\n\u003ca\n  href=\"#modal-name-goes-here\"\n  aria-expanded=\"false\"\u003e\n  Open from a tag link\n\u003c/a\u003e\n```\n\n### Example markup\n```html\n\u003cdiv\n  id=\"modal-name\"\n  data-modal-target\n  class=\"hidden\"\u003e\n  \u003cdiv class=\"flex items-center justify-center fixed inset-0 z-50\"\u003e\n    \u003cdiv\n      data-modal-close\n      data-modal-overlay\n      tabindex=\"-1\"\n      data-class-out=\"opacity-0\"\n      data-class-in=\"opacity-50\"\n      class=\"opacity-0 fixed inset-0 w-full z-40 transition-opacity duration-300 bg-black select-none\"\u003e\u003c/div\u003e\n    \u003cdiv\n      data-modal-wrapper\n      data-class-out=\"opacity-0 translate-y-5\"\n      data-class-in=\"opacity-100 translate-y-0\"\n      class=\"opacity-0 translate-y-5 w-full z-50 overflow-auto max-w-md max-h-screen scrolling-touch transition-all duration-300 bg-white flex flex-col transform shadow-xl rounded-md m-5\"\u003e\n      \u003cdiv class=\"flex items-center justify-between border-b p-6\"\u003e\n        \u003cdiv\u003e\n          Headline\n        \u003c/div\u003e\n        \u003cbutton\n          data-modal-close\n          aria-label=\"Close\"\n          class=\"text-gray-700 hover:text-black focus:outline-none focus:text-black transition ease-in-out duration-150 ml-auto\"\u003e\n          \u003csvg class=\"h-6 w-6\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\"\u003e\u003cpath stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M6 18L18 6M6 6l12 12\" /\u003e\u003c/svg\u003e\n        \u003c/button\u003e\n      \u003c/div\u003e\n      \u003cdiv class=\"relative overflow-x-hidden overflow-y-auto h-full flex-grow p-5\"\u003e\n        \u003cp class=\"mb-4\"\u003e\n          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.\n        \u003c/p\u003e\n        \u003cdiv class=\"text-right\"\u003e\n          \u003cbutton\n            data-modal-close\n            class=\"underline\"\u003e\n            Close Modal\n          \u003c/button\u003e\n          or [esc] key\n        \u003c/div\u003e\n      \u003c/div\u003e\n    \u003c/div\u003e\n  \u003c/div\u003e\n\u003c/div\u003e\n```\n\n## Animations\nYou can control overlay and the div wrapper animations using TailwindCSS classes via:\n\n- Leaving screen: `data-class-out` and `class`\n- Entering screen: `data-class-in`\n\n```html\n\u003cdiv\n  ...\n  data-class-in=\"opacity-50\"\n  data-class-out=\"opacity-0\"\n  class=\"opacity-0 ...\"\u003e\u003c/div\u003e\n  \u003cdiv\n    data-class-in=\"opacity-100 translate-y-0\"\n    data-class-out=\"opacity-0 translate-y-5\"\n    class=\"opacity-0 translate-y-5 ...\"\u003e\n\n```\n\n## Initialize\n```javascript\nmodal.init()\n```\n\n## Methods\n\nopenModal()\n```javascript\nmodal.openModal('modal-name');\n```\n\ncloseModal()\n```javascript\nmodal.closeModal('modal-name');\n```\n\n### Quick start: Installation\nCopy/paste and use.\n\n## Copyright and license\nCopyright 2021 Tomasz Bujnowicz under the [MIT license](http://opensource.org/licenses/MIT).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftomaszbujnowicz%2Fvanilla-js-tailwindcss-modal","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftomaszbujnowicz%2Fvanilla-js-tailwindcss-modal","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftomaszbujnowicz%2Fvanilla-js-tailwindcss-modal/lists"}