{"id":13760433,"url":"https://github.com/Alexandrshy/keukenhof","last_synced_at":"2025-05-10T10:32:53.527Z","repository":{"id":36985480,"uuid":"269709196","full_name":"Alexandrshy/keukenhof","owner":"Alexandrshy","description":"Lightweight and easy to use the library for modals","archived":false,"fork":false,"pushed_at":"2023-08-21T01:24:24.000Z","size":6040,"stargazers_count":19,"open_issues_count":26,"forks_count":2,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-05-05T14:55:41.960Z","etag":null,"topics":["a11y","dialog","javascript","modal","popup"],"latest_commit_sha":null,"homepage":"https://keukenhof.vercel.app/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Alexandrshy.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":"SECURITY.md","support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2020-06-05T16:50:51.000Z","updated_at":"2024-11-06T12:39:47.000Z","dependencies_parsed_at":"2024-08-03T13:15:01.611Z","dependency_job_id":null,"html_url":"https://github.com/Alexandrshy/keukenhof","commit_stats":{"total_commits":238,"total_committers":4,"mean_commits":59.5,"dds":0.6680672268907564,"last_synced_commit":"4ac60c29ae61ad99ee87b7b15716835cfc22ef40"},"previous_names":[],"tags_count":54,"template":false,"template_full_name":"Alexandrshy/como-north","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Alexandrshy%2Fkeukenhof","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Alexandrshy%2Fkeukenhof/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Alexandrshy%2Fkeukenhof/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Alexandrshy%2Fkeukenhof/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Alexandrshy","download_url":"https://codeload.github.com/Alexandrshy/keukenhof/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":253402070,"owners_count":21902792,"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":["a11y","dialog","javascript","modal","popup"],"created_at":"2024-08-03T13:01:10.168Z","updated_at":"2025-05-10T10:32:53.038Z","avatar_url":"https://github.com/Alexandrshy.png","language":"TypeScript","funding_links":[],"categories":["Modals and Popups","Modals and Popups [🔝](#readme)","模态框和弹出框"],"sub_categories":["Other","其它"],"readme":"\u003cp align=\"center\"\u003e\n  \u003cimg src=\"https://user-images.githubusercontent.com/14329906/89714496-2ebf9380-d9b0-11ea-8646-8cae646c1e22.png\" height=\"150px\"/\u003e\n\u003c/p\u003e\n\n\u003ch1 align=\"center\"\u003eKeukenhof.js\u003c/h1\u003e\n\n\u003ch4 align=\"center\"\u003eThe lightweight library for modal windows\u003c/h4\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://www.npmjs.com/package/keukenhof\" target=\"_blank\" rel=\"noopener\"\u003e\n    \u003cimg src=\"https://img.shields.io/npm/v/keukenhof?style=for-the-badge\" alt=\"npm version\" /\u003e\n  \u003c/a\u003e\n  \u003ca href=\"https://opensource.org/licenses/MIT\" target=\"_blank\" rel=\"noopener\"\u003e\n    \u003cimg src=\"https://img.shields.io/badge/license-MIT-blue.svg?style=for-the-badge\u0026color=green\" alt=\"License\"\u003e\n  \u003c/a\u003e\n  \u003ca href=\"https://bundlephobia.com/result?p=keukenhof\"\u003e\n    \u003cimg src=\"https://img.shields.io/bundlephobia/minzip/keukenhof?style=for-the-badge\u0026color=orange\u0026label=gzip\" alt=\"gzip size\"\u003e\n  \u003c/a\u003e\n\u003c/p\u003e\n\n## Table of Contents\n\n-   [Demo](#demo)\n-   [Installation](#installation)\n-   [Usage](#usage)\n-   [Docs](#docs)\n-   [API](#api)\n-   [Contribute](#contribute)\n-   [Licensing](#licensing)\n\n## Demo\n\n[![Keukenhof.js visualized](https://user-images.githubusercontent.com/14329906/89715344-25392a00-d9b6-11ea-8751-0b570e0368c5.gif)](https://keukenhof.vercel.app/#example)\n\n## Installation\n\n### Package Manager\n\n[Keukenhof.js](https://www.npmjs.com/package/keukenhof) page on npm\n\n```bash\n# With npm\nnpm i keukenhof\n\n# With Yarn\nyarn add keukenhof\n```\n\n### CDN\n\n```html\n\u003cscript src=\"https://unpkg.com/keukenhof\"\u003e\u003c/script\u003e\n```\n\n## Usage\n\nPart of the preparation of the library work is hidden, you just need to create a layout. There are no restrictions on the layout of your modal window, you just need to add `data-keukenhof-open` to the value of which you need to specify the selector of the window that should open on click and `data-keukenhof-close` for the element that should close the currently active modal\n\n```html\n\u003c!DOCTYPE html\u003e\n\u003ctitle\u003eKeukenhof.js modal example\u003c/title\u003e\n\n\u003cstyle\u003e\n    #modal {\n        display: none;\n    }\n\n    #modal.isOpen {\n        display: block;\n    }\n\u003c/style\u003e\n\n\u003cbutton data-keukenhof-open=\"#modal\"\u003eOpen modal\u003c/button\u003e\n\n\u003c!-- Main modal wrapper with required id --\u003e\n\u003cdiv id=\"modal\" role=\"dialog\" aria-hidden=\"true\" aria-labelledby=\"title\" aria-describedby=\"desc\"\u003e\n    \u003c!-- Element for handling a click outside the modal window --\u003e\n    \u003cdiv class=\"overlay\" tabindex=\"-1\" data-keukenhof-close\u003e\u003c/div\u003e\n\n    \u003cheader\u003e\n        \u003c!-- Button to close the modal window --\u003e\n        \u003cbutton class=\"close\" aria-label=\"Close modal\" data-keukenhof-close\u003eClose\u003c/button\u003e\n    \u003c/header\u003e\n\n    \u003c!-- Body used to improve a11y by describing the purpose of the modal --\u003e\n    \u003cmain\u003e\n        \u003ch2 id=\"title\"\u003eKeukenhof.js modal\u003c/h2\u003e\n        \u003cp id=\"desc\"\u003eLightweight and easy to use the library for modals\u003c/p\u003e\n    \u003c/main\u003e\n\u003c/div\u003e\n\n\u003cscript src=\"https://unpkg.com/keukenhof\"\u003e\u003c/script\u003e\n\n\u003cscript\u003e\n    Keukenhof.init();\n\u003c/script\u003e\n```\n\n### Module bundlers\n\nAn alternative connection option is to use import `Keukenhof.js`\n\n```js\nimport {Keukenhof} from 'keukenhof';\n\n// Initializing modal windows based on markup\nKeukenhof.init({\n    // options\n});\n\n// Configure and open modal by selector\nKeukenhof.open('#modal', {\n    // options\n});\n\n// Close active modal window\nKeukenhof.close();\n```\n\n## Docs\n\nThe documentation can also be found on the [Keukenhof.js website](https://keukenhof.vercel.app/#options)\n\n| Options          | Type     | Description                                                                                                                                                                                                           |\n| ---------------- | -------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| `openAttribute`  | String   | The attribute containing the selector of the modal window that should be opened by clicking on the element                                                                                                            |\n| `closeAttribute` | String   | The attribute marking elements inside the modal window, clicking on which will close this modal window                                                                                                                |\n| `openClass`      | String   | The class name added for the open modal window                                                                                                                                                                        |\n| `openingClass`   | String   | The class name added for the modal window that is in the process of opening (required for modals using CSS animations)                                                                                                |\n| `closingClass`   | String   | The class name added for the modal window that is in the process of closing (required for modals using CSS animations)                                                                                                |\n| `hasAnimation`   | Boolean  | Indicates the need to wait for the completion of the CSS animation of opening/closing the modal window                                                                                                                |\n| `isAssignFocus`  | Boolean  | Indicates the need to focus on an interactive element inside the modal after opening                                                                                                                                  |\n| `isFocusInside`  | Boolean  | Indicates the need to restrict focusable interactive elements using the keyboard inside the active modal                                                                                                              |\n| `scrollBehavior` | Object   | Specify the need to block the scroll after opening a modal window. The scroll is blocked with `overflow: hidden;` if after closing the modal the overflow value should be defined just specify this as `defaultValue` |\n| `onOpen`         | Function | Defines a function that will be called when the modal is open (if `hasAnimation: true;` is called after the animation has finished)                                                                                   |\n| `onClose`        | Function | Defines a function that will be called when the modal is close (if `hasAnimation: true;` is called after the animation has finished)                                                                                  |\n| `beforeOpen`     | Function | Defines a function to be called before the modal opens. If the function returns `false` the modal won't open                                                                                                          |\n| `beforeClose`    | Function | Defines a function to be called before the modal closes. If the function returns `false` the modal won't close                                                                                                        |\n\n## API\n\n### init()\n\nInitializes all modals based on markup. Accepts one optional parameter for configuration\n\n```js\nKeukenhof.init({\n    selector: '#modal-1',\n    openAttribute: 'data-modal-open',\n    closeAttribute: 'data-modal-close',\n    openClass: 'is-open',\n    openingClass: 'is-opening',\n    closingClass: 'is-closing',\n    hasAnimation: true,\n    isAssignFocus: false,\n    isFocusInside: false,\n    scrollBehavior: {\n        isDisabled: true,\n    },\n    onOpen: () =\u003e console.log('The modal window is open'),\n    onClose: () =\u003e console.log('The modal window is close'),\n});\n```\n\n### open()\n\nOpens a modal window with the given selector. The `open()` method has a second optional parameter for configuration\n\n```js\n// With config\nKeukenhof.open('#modal', {\n    openAttribute: 'data-modal-open',\n    closeAttribute: 'data-modal-close',\n    openClass: 'is-open',\n    openingClass: 'is-opening',\n    closingClass: 'is-closing',\n    hasAnimation: true,\n});\n\n// Without config\nKeukenhof.open('#modal');\n```\n\n### close()\n\nCloses the modal with the given selector. If no parameters are passed to the `close()` method, the currently open window will be closed\n\n```js\n// With selector\nKeukenhof.close('#modal');\n\n// Without selector\nKeukenhof.close();\n```\n\n## Contribute\n\n1. Clone the repository `git@github.com:Alexandrshy/keukenhof.git`\n2. Go to the project directory `cd keukenhof`\n3. Install dependencies `yarn`\n4. Run dev build with auto rebuild after any changes `yarn build:dev`\n5. Complete your improvements, commit changes and submit your pull request for review code\n\n## Licensing\n\n[MIT license](http://opensource.org/licenses/MIT)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FAlexandrshy%2Fkeukenhof","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FAlexandrshy%2Fkeukenhof","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FAlexandrshy%2Fkeukenhof/lists"}