{"id":23274260,"url":"https://github.com/luncheon/html-native-modal","last_synced_at":"2025-08-21T06:31:53.913Z","repository":{"id":46988886,"uuid":"279887112","full_name":"luncheon/html-native-modal","owner":"luncheon","description":"Dead simple modal library based on the HTML 5.2 native HTMLDialogElement.","archived":false,"fork":false,"pushed_at":"2024-10-04T10:13:36.000Z","size":72,"stargazers_count":3,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"main","last_synced_at":"2024-10-29T01:08:54.325Z","etag":null,"topics":["dialog","modal","vanilla-js"],"latest_commit_sha":null,"homepage":"https://luncheon.github.io/html-native-modal/index.html","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"wtfpl","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/luncheon.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2020-07-15T14:14:08.000Z","updated_at":"2024-08-27T04:44:31.000Z","dependencies_parsed_at":"2024-08-27T05:43:37.029Z","dependency_job_id":"d17dca70-b7c6-48a7-99c2-6805d58bff80","html_url":"https://github.com/luncheon/html-native-modal","commit_stats":null,"previous_names":[],"tags_count":5,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/luncheon%2Fhtml-native-modal","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/luncheon%2Fhtml-native-modal/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/luncheon%2Fhtml-native-modal/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/luncheon%2Fhtml-native-modal/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/luncheon","download_url":"https://codeload.github.com/luncheon/html-native-modal/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":230494926,"owners_count":18235047,"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","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":["dialog","modal","vanilla-js"],"created_at":"2024-12-19T20:12:41.778Z","updated_at":"2024-12-19T20:12:42.293Z","avatar_url":"https://github.com/luncheon.png","language":"JavaScript","readme":"# html-native-modal\n\nDead simple modal library based on the HTML 5.2 native `\u003cdialog\u003e`.\n\n* APIs are based on the [`HTMLDialogElement` spec](https://www.w3.org/TR/html52/interactive-elements.html#the-dialog-element).  \n(See also [HTMLDialogElement - Web APIs | MDN](https://developer.mozilla.org/docs/Web/API/HTMLDialogElement))\n  - `\u003cdialog\u003e` tag\n  - `dialogElement.showModal()` method\n  - `dialogElement.close()` method\n  - `cancel` event\n* No dependencies. No polyfills. Works with any framework.\n* Tiny. JS \u003c 100 lines, CSS \u003c 100 lines.\n* Works in IE 11.\n\n[Demo](https://luncheon.github.io/html-native-modal/index.html)\n\n[Preact + TypeScript (TSX) example on CodeSandbox](https://codesandbox.io/s/html-native-modal-on-preact-rwt8y?file=/index.tsx)\n\n[Nested modals example on CodePen](https://codepen.io/luncheon/pen/wvGWaLx/left/)\n\n\n## Installation\n\n### npm\n\n```bash\nnpm i html-native-modal\n```\n\n### CDN\n\n```html\n\u003clink rel=\"stylesheet\" href=\"https://cdn.jsdelivr.net/npm/html-native-modal@0.3.0/html-native-modal.min.css\"\u003e\n\u003cscript src=\"https://cdn.jsdelivr.net/npm/html-native-modal@0.3.0\"\u003e\u003c/script\u003e\n```\n\n### Download\n\n* \u003ca target=\"_blank\" download=\"html-native-modal.min.css\" href=\"https://cdn.jsdelivr.net/npm/html-native-modal@0.3.0/html-native-modal.min.css\"\u003ehtml-native-modal.min.css\u003c/a\u003e\n* \u003ca target=\"_blank\" download=\"html-native-modal.min.js\" href=\"https://cdn.jsdelivr.net/npm/html-native-modal@0.3.0/html-native-modal.min.js\"\u003ehtml-native-modal.min.js\u003c/a\u003e\n\n\n## Usage\n\n```html\n\u003clink rel=\"stylesheet\" href=\"html-native-modal.min.css\"\u003e\n\u003cscript src=\"html-native-modal.min.js\"\u003e\u003c/script\u003e\n\n\u003cbutton onclick=\"this.nextElementSibling.showModal()\"\u003eOpen\u003c/button\u003e\n\n\u003cdialog style=\"width: 480px; padding: 16px 32px;\"\u003e\n  \u003cbutton style=\"float: right;\" onclick=\"this.parentElement.close()\"\u003eClose\u003c/button\u003e\n  \u003cp\u003eLorem ipsum dolor sit amet, consectetur adipiscing elit, ...\u003c/p\u003e\n\u003c/dialog\u003e\n```\n\n[Run on CodePen](https://codepen.io/luncheon/pen/MWyewoz/left/)\n\n\n## Canceling Canceling\n\nBy default, pressing the `Esc` key or clicking on the background will close the dialog.  \nTo disable this behavior, listen for the `cancel` event and call `event.preventDefault()`.\n\n```html\n\u003cdialog id=\"my-modal\" style=\"width: 480px; padding: 16px 32px;\"\u003e\n  \u003cbutton style=\"float: right;\" onclick=\"this.parentElement.close()\"\u003eClose\u003c/button\u003e\n  \u003cp\u003eLorem ipsum dolor sit amet, consectetur adipiscing elit, ...\u003c/p\u003e\n\u003c/dialog\u003e\n\n\u003cscript\u003e\n  document\n    .getElementById('my-modal')\n    .addEventListener('cancel', function (event) {\n      event.preventDefault()\n    });\n\u003c/script\u003e\n```\n\n[Run on CodePen](https://codepen.io/luncheon/pen/JjXKdLd/left/)\n\nInlined `\u003cdialog oncancel=\"arguments[0].preventDefault()\"\u003e...\u003c/dialog\u003e` does not work on the browsers that don't support `HTMLDialogElement` natively.\n\n\n## License\n\n[WTFPL](http://www.wtfpl.net)\n\n\n## Other Vanilla JS Modal Packages\n\n* https://github.com/Ghosh/micromodal\n* https://github.com/robinparisi/tingle\n* https://github.com/edenspiekermann/a11y-dialog\n* https://github.com/KaneCohen/modal-vanilla\n* https://github.com/hubspot/vex\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fluncheon%2Fhtml-native-modal","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fluncheon%2Fhtml-native-modal","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fluncheon%2Fhtml-native-modal/lists"}