{"id":21895302,"url":"https://github.com/persianturtle/popupjs","last_synced_at":"2025-04-15T16:38:06.533Z","repository":{"id":114586589,"uuid":"117631023","full_name":"persianturtle/popupjs","owner":"persianturtle","description":"A minimalistic popup library made for designers \u0026 developers.","archived":false,"fork":false,"pushed_at":"2018-09-28T16:04:49.000Z","size":9,"stargazers_count":7,"open_issues_count":0,"forks_count":1,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-03-28T22:24:53.815Z","etag":null,"topics":["interstitials","javascript","lightbox","minimalist","modal","popup"],"latest_commit_sha":null,"homepage":"https://persianturtle.github.io/popupjs/","language":"HTML","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/persianturtle.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2018-01-16T04:26:17.000Z","updated_at":"2023-07-29T05:29:38.000Z","dependencies_parsed_at":null,"dependency_job_id":"77efad59-29d3-4891-bacf-283b4edd1c47","html_url":"https://github.com/persianturtle/popupjs","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/persianturtle%2Fpopupjs","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/persianturtle%2Fpopupjs/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/persianturtle%2Fpopupjs/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/persianturtle%2Fpopupjs/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/persianturtle","download_url":"https://codeload.github.com/persianturtle/popupjs/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":249109651,"owners_count":21214188,"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":["interstitials","javascript","lightbox","minimalist","modal","popup"],"created_at":"2024-11-28T13:34:03.142Z","updated_at":"2025-04-15T16:38:06.527Z","avatar_url":"https://github.com/persianturtle.png","language":"HTML","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Demo\n\nView examples here: https://persianturtle.github.io/popupjs/\n\n# Philosphy \u0026 Goals\n\nAre you comfortable writing CSS/JS? This popup library is for you!\n\nThe goals for this project are to:\n\n1.  **make styling easy** without needing to overwrite a bunch of CSS\n2.  **allow custom functionality** with access to the raw `event` that triggered a popup's opening/closing\n3.  **have no dependencies** with support for modern browsers\n4.  **handle the basic stuff** like animations, overlays and preventing body scrolling while open\n\n# Features\n\n- Allows custom functions to be executed before/after opening/closing with access to the `event` that triggered a popup's opening/closing\n\n- Opening \u0026 closing animations\n\n- Disable `body` scrolling when a popup is open\n\n- Automatically closes existing popups before opening new ones\n\n- Easy styling with minimum default styles\n\n- Can be used for all types of popups (see examples)\n\n# Getting Started\n\n1.  Include both `popup.js` and `popup.css`. Both, combined is around 1kb minified \u0026 gzipped.\n2.  Include a popup's HTML with the following wrapper:\n\n        \u003cdiv class=\"popup className\"\u003e\n          \u003cdiv class=\"content\"\u003e\n          [your popup's HTML here]\n          \u003c/div\u003e\n          \u003cbutton class=\"close\"\u003e×\u003c/button\u003e\n        \u003c/div\u003e\n\n3.  Register the popup by calling the register function:\n\n        window.popup.register(\"className\")\n\n4.  Add custom CSS for your popup. This library provides almost no default styling. It does handle the popup animation as well as the tinted overlay. The rest is up to you!\n5.  See the \"Usage \u0026 Options\" section below for all available options.\n\n# API\n\nThis library exposes three functions:\n\n1.  `window.popup.register(_className[, options]_)`\n\n    **Parameters:**\n\n    `className`\n\n    _string_\n\n    By default, the class name of the popup element:\n\n        \u003cdiv class=\"popup className\"\u003e\n\n    as well as the class names of the trigger elements:\n\n        \u003ca class=\"trigger className\"\u003e\n\n    `options`\n\n    _object_\n\n    See a full list of options in the _options_ section.\n\n    **Return value:**\n\n    `popup`\n\n    _object_\n\n    An object with the following shape:\n\n          {\n            triggers: NodeList,\n            element: Node,\n            ...options\n          }\n\n2.  `window.popup.open(_popup[, event]_)`\n\n    **Parameters:**\n\n    `popup`\n\n    _object_\n\n    The popup object returned from `window.popup.register`.\n\n    `event`\n\n    _event_\n\n    The event that triggered a popup's opening.\n\n3.  `window.popup.close(_popup[, event]_)`\n\n    **Parameters:**\n\n    `popup`\n\n    _object_\n\n    The popup object returned from `window.popup.register`.\n\n    `event`\n\n    _event_\n\n    The event that triggered a popup's closing.\n\n## Options\n\n`triggers`\n\n_NodeList_\n\nOverwrite the default NodeList of:\n\n    document.querySelectorAll(\".trigger.className\")\n\n`element`\n\n_Node_\n\nOverwrite the default Node of:\n\n    document.querySelector(\".popup.className\")\n\n`preventCloseOnOutsideClick`\n\n_boolean_\n\nIf true, clicking outside of the popup's `.content` will not close the popup. Default: `false`.\n\n`center`\n\n_boolean_\n\nIf true, the popup will be vertically centered. Default: `false`.\n\n`beforeOpen`\n\n_function_\n\nA function that will be executed immediately before a popup opens. The function will be passed in the event that opened the popup. If the `beforeOpen` function returns `false`, the popup will not open.\n\n`afterOpen`\n\n_function_\n\nA function that will be executed immediately after a popup opens. The function will be passed in the event that opened the popup.\n\n`beforeClose`\n\n_function_\n\nA function that will be executed immediately before a popup closes. The function will be passed in the event that closed the popup.\n\n`afterClose`\n\n_function_\n\nA function that will be executed immediately after a popup closes. The function will be passed in the event that closed the popup.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpersianturtle%2Fpopupjs","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fpersianturtle%2Fpopupjs","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpersianturtle%2Fpopupjs/lists"}