# hash-dialog-modal Open and close [``] modals based on the URL hash value. A vanilla JavaScript library for all browsers and frameworks. [Demo] [``]: https://developer.mozilla.org/docs/Web/HTML/Element/dialog [Demo]: https://html.hyunbin.page/hash-dialog-modal https://user-images.githubusercontent.com/47051820/223364228-0893dfe1-ef83-4cda-833d-bdace9bb3069.mp4 ## Explanation Assume a webpage with the following anchor elements. ```html #1 #2 ``` **The dialog will be opened if** 1. The page is initially loaded with the hash of `#1` or `#2`. 2. Hash change is triggered (e.g. clicking ``). **The dialog will be not open if** - The page is requested with `#3`, since there are no `` elements with the `href` value of `#3`. The URL hash is trimmed as well. **The dialog will be closed if** 1. The `Escape` key is pressed (browser default). 2. `dialog.close()` is called using JavaScript. **When the dialog is closed** 1. Hash is removed from the current URL using `history.pushState()`. 2. Corresponding `` element is focused for keyboard accessibility. **When the dialog is opened/closed** - The `` can have its `overflow` automatically set to `hidden/visible` to remove scroll from the ``. Reference [options](#options). ## Usage Import from [jsDelivr] - Vanilla JavaScript example [jsdelivr]: https://www.jsdelivr.com/package/npm/hash-dialog-modal ```html #1 #2 ``` Install from [npm] - Node.js and [SvelteKit] example [npm]: https://www.npmjs.com/package/hash-dialog-modal [SvelteKit]: https://kit.svelte.dev/ ```svelte #1 #2 {dialogContent} ``` ## Options ```typescript export declare const controlDialogWithUrlHash: ( dialog: HTMLDialogElement, overflow: 'auto' | 'manual', // sets the overflow style of the options?: Partial<{ onHashRemoval: () => void; // runs on dialog close and hash removal }> ) => { removeEventListeners: () => void; // removes all event listeners }; ``` ## Advanced What `overflow` auto is recommended. ```javascript // Remove scroll from the when the is opened as a modal. if (overflow === 'auto') document.body.style.overflow = 'hidden'; // handleHash if (overflow === 'auto') document.body.style.overflow = 'visible'; // closeDialog ``` Why `onHashRemoval` callback should be provided. ```javascript window.history.pushState(null, '', ' '); // Does not trigger on:hashchange event. options.onHashRemoval?.(); // Therefore, the callback should be manually provided. ```