{"id":18483262,"url":"https://github.com/cloudcmd/modal","last_synced_at":"2025-04-08T18:32:33.858Z","repository":{"id":57102603,"uuid":"148764165","full_name":"cloudcmd/modal","owner":"cloudcmd","description":"lightbox library for displaying modals with api similar to FancyBox v2","archived":false,"fork":false,"pushed_at":"2023-01-15T17:30:23.000Z","size":125,"stargazers_count":5,"open_issues_count":1,"forks_count":0,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-04-02T20:38:28.916Z","etag":null,"topics":["cloudcmd","fancybox","hacktoberfest","javascript","lightbox","modal"],"latest_commit_sha":null,"homepage":null,"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/cloudcmd.png","metadata":{"files":{"readme":"README.md","changelog":"ChangeLog","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":"2018-09-14T09:07:00.000Z","updated_at":"2023-02-08T17:05:03.000Z","dependencies_parsed_at":"2023-02-09T23:00:45.771Z","dependency_job_id":null,"html_url":"https://github.com/cloudcmd/modal","commit_stats":null,"previous_names":[],"tags_count":12,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cloudcmd%2Fmodal","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cloudcmd%2Fmodal/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cloudcmd%2Fmodal/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cloudcmd%2Fmodal/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/cloudcmd","download_url":"https://codeload.github.com/cloudcmd/modal/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247902504,"owners_count":21015460,"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":["cloudcmd","fancybox","hacktoberfest","javascript","lightbox","modal"],"created_at":"2024-11-06T12:35:01.977Z","updated_at":"2025-04-08T18:32:28.849Z","avatar_url":"https://github.com/cloudcmd.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Modal [![License][LicenseIMGURL]][LicenseURL] [![NPM version][NPMIMGURL]][NPMURL] [![Build Status][BuildStatusIMGURL]][BuildStatusURL] [![Coverage][CoverageIMGURL]][CoverageURL]\n\n[NPMIMGURL]: https://img.shields.io/npm/v/@cloudcmd/modal.svg?style=flat\u0026longCache=true\n[BuildStatusURL]: https://github.com/cloudcmd/modal/actions?query=workflow%3A%22Node+CI%22 \"Build Status\"\n[BuildStatusIMGURL]: https://github.com/cloudcmd/modal/workflows/Node%20CI/badge.svg\n[LicenseIMGURL]: https://img.shields.io/badge/license-MIT-317BF9.svg?style=flat\u0026longCache=true\n[NPMURL]: https://npmjs.org/package/@cloudcmd/modal \"npm\"\n[LicenseURL]: https://tldrlegal.com/license/mit-license \"MIT License\"\n[CoverageURL]: https://coveralls.io/github/cloudcmd/modal?branch=master\n[CoverageIMGURL]: https://coveralls.io/repos/cloudcmd/modal/badge.svg?branch=master\u0026service=github\n\nLightbox library for displaying modals with api similar to [FancyBox v2](http://fancyapps.com/fancybox/).\n\n![Modal](https://raw.githubusercontent.com/cloudcmd/modal/master/screen/modal.png \"modal\")\n\n# Install\n\n```\nnpm i @cloudcmd/modal\n```\n\n## How Come?\n\nI used `fancybox` for a long time but there is a couple things I don't like about it:\n\n- has not tests\n- uses jquery\n- big (`30kb` of `jquery` + `13kb` = `43kb` against `23kb` of `modal`)\n- slow\n- does not support `common.js`, `esm` etc\n- license not compatible with `MIT`\n\n`Modal` in the other hand:\n\n- written on vanilla js\n- has no extra dependencies\n- has full test coverage\n- does most stuff using `css`\n- can be installed using `npm`\n- supports `common.js`, `esm`\n- contains `css` and `images` inside of a `js` bundle (for using with `webpack` see `webpack.config.js`)\n- Api compatible with `fancybox`\n\n# API\n\nFirst things first, import `modal` with:\n\n```js\nimport modal from '@cloudcmd/modal';\n```\n\nUsing build file:\n\n## open(el[, options])\n\n```js\nconst el = document.createElement('div');\nel.textContent = 'hello';\n\n// simplest possible modal open using existing html element\nmodal.open(el);\nmodal.close();\n\n// usage with title and hooks\nmodal.open(el, {\n    title: 'hello world',\n    beforeOpen: () =\u003e console.log('before open'),\n    afterOpen: () =\u003e console.log('after open'),\n    beforeClose: () =\u003e console.log('before close'),\n    afterClose: () =\u003e console.log('after close'),\n    helpers: {\n        title: true,\n    },\n});\n```\n\n## open(images[, options])\n\n```js\nconst image = {\n    title: 'hello',\n    href: 'cloudcmd.png',\n};\n\nmodal.open([image], {\n    autoSize: true,\n    helpers: {\n        title: true,\n    },\n});\n```\n\n## close\n\nClose opened `modal` window:\n\n```js\nmodal.close();\n```\n\n# License\n\nMIT\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcloudcmd%2Fmodal","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcloudcmd%2Fmodal","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcloudcmd%2Fmodal/lists"}