{"id":28174546,"url":"https://github.com/rfkhusnutdinov/cg-modal","last_synced_at":"2025-07-30T07:07:21.178Z","repository":{"id":37764303,"uuid":"505072782","full_name":"rfkhusnutdinov/cg-modal","owner":"rfkhusnutdinov","description":"Simple JS library for modal windows","archived":false,"fork":false,"pushed_at":"2022-06-22T12:37:52.000Z","size":405,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-07-26T14:47:17.464Z","etag":null,"topics":["es6","js","modal","modal-dialogs","modal-windows"],"latest_commit_sha":null,"homepage":"https://rfkhusnutdinov.github.io/cg-modal/demo/index.html","language":"JavaScript","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/rfkhusnutdinov.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":"2022-06-19T10:06:45.000Z","updated_at":"2022-06-22T11:53:47.000Z","dependencies_parsed_at":"2022-09-14T06:10:21.978Z","dependency_job_id":null,"html_url":"https://github.com/rfkhusnutdinov/cg-modal","commit_stats":null,"previous_names":[],"tags_count":3,"template":false,"template_full_name":null,"purl":"pkg:github/rfkhusnutdinov/cg-modal","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rfkhusnutdinov%2Fcg-modal","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rfkhusnutdinov%2Fcg-modal/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rfkhusnutdinov%2Fcg-modal/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rfkhusnutdinov%2Fcg-modal/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/rfkhusnutdinov","download_url":"https://codeload.github.com/rfkhusnutdinov/cg-modal/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rfkhusnutdinov%2Fcg-modal/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":267827498,"owners_count":24150349,"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-07-30T02:00:09.044Z","response_time":70,"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":["es6","js","modal","modal-dialogs","modal-windows"],"created_at":"2025-05-15T22:16:37.440Z","updated_at":"2025-07-30T07:07:21.046Z","avatar_url":"https://github.com/rfkhusnutdinov.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# CgModal\n\nCgModal - is simple and lightweight JS plugin of displaying modal windows which does not depend on jQuery or others.\n\nFor examples and demos, see [link](https://rfkhusnutdinov.github.io/cg-modal/demo)\n\n## Installation\n\n- **Via npm** `npm install --save cg-modal`\n- **Via script tag** (change `@latest` to latest version `ex: @1.0.1`)\n\n```html\n\u003clink\n  rel=\"stylesheet\"\n  href=\"https://unpkg.com/cg-modal@latest/dist/cg-modal.min.css\"\n/\u003e\n\u003cscript src=\"https://unpkg.com/cg-modal@latest/dist/cg-modal.min.js\"\u003e\u003c/script\u003e\n\u003c!-- or --\u003e\n\u003clink\n  rel=\"stylesheet\"\n  href=\"https://cdn.jsdelivr.net/npm/cg-modal@latest/dist/cg-modal.min.css\"\n/\u003e\n\u003cscript src=\"https://cdn.jsdelivr.net/npm/cg-modal@latest/dist/cg-modal.min.js\"\u003e\u003c/script\u003e\n```\n\n## Usage\n\nIf you are using **import/export syntax**, you need to import library:\n\n```javascript\nimport \"cg-modal\";\n// or\nimport \"cg-modal/dist/cg-modal.min.js\";\nimport \"cg-modal/dist/cg-modal.min.css\";\n```\n\nAppend to document following HTML:\n\n```html\n\u003c!-- HTML of open modal button --\u003e\n\u003cbutton type=\"button\" data-open-modal=\"modal\"\u003eButton\u003c/button\u003e\n\n\u003c!-- HTML of modal window --\u003e\n\u003cdiv class=\"modal\" data-modal=\"modal\"\u003e\n  \u003cdiv class=\"modal__wrapper\"\u003e\n    \u003cdiv class=\"modal__content\"\u003e\n      \u003cbutton class=\"modal__close-btn\" type=\"button\"\u003eClose\u003c/button\u003e\n      \u003c!-- modal content --\u003e\n    \u003c/div\u003e\n  \u003c/div\u003e\n\u003c/div\u003e\n```\n\n**Note:** Button which open modal window should contains data attribute (data-open-modal) and modal window should contains (data-modal)\n\nThen, create an instance of class\n\n```javascript\nconst modals = new CgModal({\n  // Options\n});\n```\n\n## API\n\n### Parameters\n\n| Name                    | Type      | Default             | Description                                                                                                                                                                                                                                                          |\n| ----------------------- | --------- | ------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| **selector**            | `string`  | `.modal`            | Selector HTML element that will act as a modal window                                                                                                                                                                                                                |\n| **openButtonSelector**  | `string`  | `[data-open-modal]` | Selector HTML element that will act as the button that opens the modal window                                                                                                                                                                                        |\n| **closeButtonSelector** | `string`  | `.modal__close-btn` | The HTML element selector that will act as the modal's close button. Should be inside this window.                                                                                                                                                                   |\n| **wrapperClass**        | `string`  | `modal__wrapper`    | Class of wrapper container inside modal                                                                                                                                                                                                                              |\n| **contentClass**        | `string`  | `modal__content`    | Class of content part of modal window                                                                                                                                                                                                                                |\n| **effect**              | `null`    | `string`\\|`null`    | Modal open and close effect. There are following effects: `\"fade\" \\| \"scaleCenter\" \\| \"transformLeft\" \\| \"transformBottom\" \\| \"transformRight\" \\|\"transformTop\"`                                                                                                     |\n| **speed**               | `number`  | `300`               | Modal opening and closing animation speed                                                                                                                                                                                                                            |\n| **position**            | `string`  | `center`            | Modal position on screen. There are following values: `\"center\" \\| \"left\" \\| \"right\"`                                                                                                                                                                                |\n| **addTechClasses**      | `boolean` | `true`              | Adding technical classes for the main elements of the modal window so that the default styles work. If the value is false, then you need to write all the styles for the modal window yourself. Classes such as `\"cg-modal\", \"cg-modal-wrapper\", \"cg-modal-content\"` |\n\n### Methods\n\n- **open(modalData)** - open modal by data-attribute (data-modal)\n- **close(modal)** - close modal by Node Element\n- **closeActive()** - close active modal\n- **update()** - update instance\n\n### Events\n\nYou can listen different useful events. Using `on` parameter on initialization\n\n```javascript\nconst modals = new CgModal({\n  // ...\n  on: {\n    update: function () {\n      console.log(\"updated\");\n    },\n  },\n});\n```\n\n#### List of events:\n\n- **beforeOpen** - Event before open modal\n- **afterOpen** - Event after open modal\n- **beforeClose** - Event before close modal\n- **afterClose** - Event after close modal\n- **openBtnClick** - Event at moment of click on open button\n- **update** - Event at moment of update instance\n\n## License\n\nThe code and the documentation are released under the [MIT License](https://github.com/rfkhusnutdinov/cg-modal/blob/main/LICENSE).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frfkhusnutdinov%2Fcg-modal","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Frfkhusnutdinov%2Fcg-modal","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frfkhusnutdinov%2Fcg-modal/lists"}