{"id":16125767,"url":"https://github.com/dy/popoff","last_synced_at":"2025-09-12T23:30:59.556Z","repository":{"id":35646904,"uuid":"39921605","full_name":"dy/popoff","owner":"dy","description":"Create popups, dropdowns, tooltips and sidebars","archived":false,"fork":false,"pushed_at":"2023-03-19T17:07:09.000Z","size":6245,"stargazers_count":7,"open_issues_count":7,"forks_count":0,"subscribers_count":4,"default_branch":"master","last_synced_at":"2024-05-02T00:03:54.816Z","etag":null,"topics":["dialog","dropdowns","popup","tooltip"],"latest_commit_sha":null,"homepage":"https://dy.github.io/popoff","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/dy.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,"governance":null}},"created_at":"2015-07-29T23:43:58.000Z","updated_at":"2023-09-03T00:58:48.000Z","dependencies_parsed_at":"2023-07-26T00:55:51.013Z","dependency_job_id":"b6ecffad-fd30-4582-8bb7-932e87d12374","html_url":"https://github.com/dy/popoff","commit_stats":null,"previous_names":["dfcreative/popoff","scrapjs/popoff"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dy%2Fpopoff","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dy%2Fpopoff/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dy%2Fpopoff/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dy%2Fpopoff/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/dy","download_url":"https://codeload.github.com/dy/popoff/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":232797468,"owners_count":18577981,"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","dropdowns","popup","tooltip"],"created_at":"2024-10-09T21:31:45.176Z","updated_at":"2025-01-06T22:54:04.741Z","avatar_url":"https://github.com/dy.png","language":"JavaScript","readme":"[![Popov](https://raw.githubusercontent.com/dy/popoff/gh-pages/popoff.png \"Popov\")](https://en.wikipedia.org/wiki/Alexander_Stepanovich_Popov)\r\n\r\n# Popoff [![unstable](http://badges.github.io/stability-badges/dist/unstable.svg)](http://github.com/badges/stability-badges)\r\n\r\nPopoff runs modals, tooltips, popups, dropdowns, confirms, notifiers, popovers, lightboxes, balloons, dialogs, alerts, overlays, sidebars etc. **[Demo](http://dy.github.io/popoff/)**.\r\n\r\n## Usage\r\n\r\n[![npm install popoff](https://nodei.co/npm/popoff.png?mini=true)](https://npmjs.org/package/popoff/)\r\n\r\n\r\n```js\r\nimport createPopup from 'popoff';\r\n\r\n//create and show modal\r\nvar modal = createPopup({\r\n\ttype: 'modal',\r\n\tcontent: `\r\n\t\t\u003ch2\u003eBlah\u003c/h2\u003e\r\n\t\t\u003cp\u003eblah\u003c/p\u003e\r\n\t`\r\n});\r\nmodal.show();\r\n\r\n//create and show dropdown\r\nvar dropdown = createPopup({\r\n\ttarget: '#menu',\r\n\ttype: 'dopdown',\r\n\tcontent: document.querySelector('#content')\r\n});\r\ndocument.querySelector('#menu').click();\r\n```\r\n\r\n## API\r\n\r\n### `let popup = new Popup({type, effect, container, ...});`\r\n\r\nCreate popup instance based on passed options.\r\n\r\n```js\r\n// modal, dropdown, tooltip, sidebar work out of the box. Otherwise define custom options below. See demo for examples.\r\ntype: 'modal',\r\n\r\n// target element that enables the popup, e.g. button.\r\ntarget: null,\r\n\r\n// an element to place popup into\r\ncontainer: document.body || document.documentElement,\r\n\r\n// show overlay, will be detected based off type\r\noverlay: true,\r\n\r\n// show close button\r\nclosable: true,\r\n\r\n// close by escape\r\nescapable: true,\r\n\r\n// show tip\r\ntip: false,\r\n\r\n// animation effect, see effects in the demo page\r\neffect: 'fade',\r\n\r\n// additional style rules for popup\r\nstyle: {}\r\n```\r\n\r\n### `popup.show(myButtonEl, () =\u003e {});`\r\n\r\nShow popup relative to the target element, invoke callback after animation end. Target and callback are optional.\r\n\r\n### `popup.hide(() =\u003e {});`\r\n\r\nHide popup, invoke callback after animation end. Callback is optional.\r\n\r\n### `popup.update();`\r\n\r\nUpdate popup position, in case of resize etc. Optionally pass an options to redefine params.\r\n\r\n```js\r\npopup.update({\r\n\ttarget: this._target || this.target,\r\n\tside: this.side,\r\n\talign: this.align,\r\n\twithin: window\r\n});\r\n```\r\n### `popup.on('show', () =\u003e {});`\r\n\r\nInvoke callback on event, one of the following: `show`, `hide`, `afterShow`, `afterHide`, `update`.\r\n\r\n\r\n## Credits\r\n\r\nPopoff engages practices of old [overlay-component](https://github.com/component/ovelay) and [dialog-component](https://github.com/component/dialog), refined and mixed with modern ES6 and browserify component approaches.\r\nList of effects is taken from [modal window effects](https://github.com/codrops/ModalWindowEffects) article from codrops, so big thanks to them for awesome lib.\r\n\r\n## See also\r\n\r\n* [prama](https://github.com/dfcreative/prama) — settings page constructor.\r\n* [placer](https://github.com/dfcreative/placer) — place any element relative to any other element in any way.\r\n* [aligner](https://github.com/dfcreative/aligner) — align elements set by one or other side.\r\n\r\n## Related\r\n\r\n* [dialogs](https://github.com/jameskyburz/dialogs) — simple dialogs: alert, confirm etc.\r\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdy%2Fpopoff","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdy%2Fpopoff","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdy%2Fpopoff/lists"}