{"id":15572976,"url":"https://github.com/avalynx/avalynx-modal","last_synced_at":"2025-07-13T23:08:45.760Z","repository":{"id":242568761,"uuid":"761937290","full_name":"avalynx/avalynx-modal","owner":"avalynx","description":"AvalynxModal is a simple modal system for web applications with fullscreen support. Based on Bootstrap \u003e=5.3 without any framework dependencies.","archived":false,"fork":false,"pushed_at":"2025-06-05T20:28:42.000Z","size":158,"stargazers_count":2,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-06-13T03:02:43.957Z","etag":null,"topics":["avalynx","bootstrap","bootstrap5","component","modal","popup"],"latest_commit_sha":null,"homepage":"","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/avalynx.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,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2024-02-22T19:10:33.000Z","updated_at":"2025-06-05T20:27:36.000Z","dependencies_parsed_at":"2024-06-03T20:49:29.192Z","dependency_job_id":"0ff6d24b-7d73-43ea-be10-f3538e7c6952","html_url":"https://github.com/avalynx/avalynx-modal","commit_stats":null,"previous_names":["avalynx/avalynx-modal"],"tags_count":3,"template":false,"template_full_name":null,"purl":"pkg:github/avalynx/avalynx-modal","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/avalynx%2Favalynx-modal","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/avalynx%2Favalynx-modal/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/avalynx%2Favalynx-modal/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/avalynx%2Favalynx-modal/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/avalynx","download_url":"https://codeload.github.com/avalynx/avalynx-modal/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/avalynx%2Favalynx-modal/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":265163553,"owners_count":23720983,"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":["avalynx","bootstrap","bootstrap5","component","modal","popup"],"created_at":"2024-10-02T18:09:09.308Z","updated_at":"2025-07-13T23:08:45.729Z","avatar_url":"https://github.com/avalynx.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# AvalynxModal\n\nAvalynxModal is a simple modal system for web applications with fullscreen support. Based on Bootstrap \u003e=5.3 without any framework dependencies.\n\n## Features\n\n- **Customizable Modals**: Supports various customization options like fullscreen mode, custom title, body content, buttons, and more.\n- **Bootstrap Integration**: Designed for seamless integration with Bootstrap \u003e= 5.3.\n- **Easy to Use**: Simple API for creating and managing modals within your web applications.\n\n## Example\n\nHere's a simple example of how to use AvalynxModal in your project:\n\n* [Overview](https://avalynx-modal.jbs-newmedia.de/examples/index.html)\n* [Simple Modal](https://avalynx-modal.jbs-newmedia.de/examples/modal.html)\n* [Modal Permanent](https://avalynx-modal.jbs-newmedia.de/examples/modal-permanent.html)\n\n## Installation\n\nTo use AvalynxModal in your project, you can directly include it in your HTML file. Ensure you have Bootstrap 5.3 or higher included in your project for AvalynxModal to work correctly.\n\nFirst, include Bootstrap:\n\n```html\n\u003c!-- Bootstrap --\u003e\n\u003clink href=\"https://cdn.jsdelivr.net/npm/bootstrap@5.3/dist/css/bootstrap.min.css\" rel=\"stylesheet\"\u003e\n\u003cscript src=\"https://cdn.jsdelivr.net/npm/bootstrap@5.3/dist/js/bootstrap.bundle.min.js\"\u003e\u003c/script\u003e\n```\n\nThen, include AvalynxModal:\n\n```html\n\u003clink href=\"path/to/avalynx-modal.css\" rel=\"stylesheet\"\u003e\n\u003cscript src=\"path/to/avalynx-modal.js\"\u003e\u003c/script\u003e\n```\n\nReplace `path/to/avalynx-modal.js` and `path/to/avalynx-modal.css` with the actual path to the files in your project.\n\n## Installation via jsDelivr ([Link](https://cdn.jsdelivr.net/npm/avalynx-modal/))\n\nAvalynxModal is also available via [jsDelivr](https://www.jsdelivr.com/). You can include it in your project like this:\n\n```html\n\u003clink href=\"https://cdn.jsdelivr.net/npm/avalynx-modal@1.0.0/dist/css/avalynx-modal.css\" rel=\"stylesheet\"\u003e\n\u003cscript src=\"https://cdn.jsdelivr.net/npm/avalynx-modal@1.0.0/dist/js/avalynx-modal.js\"\u003e\u003c/script\u003e\n```\n\nMake sure to also include Bootstrap's JS/CSS in your project to ensure AvalynxModal displays correctly.\n\n## Installation via NPM ([Link](https://www.npmjs.com/package/avalynx-modal))\n\nAvalynxModal is also available as a npm package. You can add it to your project with the following command:\n\n```bash\nnpm install avalynx-modal\n```\n\nAfter installing, you can import AvalynxModal into your JavaScript file like this:\n\n```javascript\nimport { AvalynxModal } from 'avalynx-modal';\nimport 'avalynx-modal/dist/css/avalynx-modal.min.css';\n```\n\nMake sure to also include Bootstrap's JS/CSS in your project to ensure AvalynxModal displays correctly.\n\n## Installation via Symfony AssetMapper\n\n```bash\nphp bin/console importmap:require avalynx-modal\n```\n\nAfter installing, you can import AvalynxModal into your JavaScript file like this:\n\n```javascript\nimport { AvalynxModal } from 'avalynx-modal';\nimport 'avalynx-modal/dist/css/avalynx-modal.min.css';\n```\n\nMake sure to also include Bootstrap's JS/CSS in your project to ensure AvalynxModal displays correctly.\n\n## Installation via Symfony AssetComposer\n\nMore information about the Symfony AssetComposer Bundle can be found [here](https://github.com/jbsnewmedia/asset-composer-bundle).\n\n```twig\n{% do addAssetComposer('avalynx/avalynx-modal/dist/css/avalynx-modal.css') %}\n{% do addAssetComposer('avalynx/avalynx-modal/dist/js/avalynx-modal.js') %}\n```\n\nMake sure to also include Bootstrap's JS/CSS in your project to ensure AvalynxModal displays correctly.\n\n## Installation via Composer ([Link](https://packagist.org/packages/avalynx/avalynx-modal))\n\nAvalynxModal is also available as a Composer package. You can add it to your project with the following command:\n\n```bash\ncomposer require avalynx/avalynx-modal\n```\n\nAfter installing, you can import AvalynxModal into your HTML file like this:\n\n```html\n\u003clink href=\"vendor/avalynx/avalynx-modal/dist/css/avalynx-modal.css\" rel=\"stylesheet\"\u003e\n\u003cscript src=\"vendor/avalynx/avalynx-modal/dist/js/avalynx-modal.js\"\u003e\u003c/script\u003e\n``` \n\nMake sure to also include Bootstrap's JS/CSS in your project to ensure AvalynxModal displays correctly.\n\n## Usage\n\nTo create a modal dialog, simply instantiate a new `AvalynxModal` object with the desired options:\n\n```javascript\nnew AvalynxModal(\"#myModal\", {\n  modalFullscreen: true,\n  title: 'My Modal',\n  body: 'This is the body of my modal.',\n  buttons: [\n    {\n      label: 'Close',\n      class: 'btn btn-primary',\n      onClick: function() {\n        // Close modal\n      }\n    }\n  ]\n});\n```\n\n## Options\n\nAvalynxModal allows the following options for customization:\n\n- `id`: (string) The ID of the element to attach the modal to.\n- `options`: An object containing the following keys:\n    - `modalFullscreen`: (boolean) Enable fullscreen mode (default: `false`).\n    - `title`: (string) The title of the modal (default: `''`).\n    - `titleIsHtml`: (boolean) Treat the title as HTML (default: `false`).\n    - `body`: (string) The body content of the modal (default: `''`).\n    - `bodyIsHtml`: (boolean) Treat the body content as HTML (default: `false`).\n    - `bodyAjaxUrl`: (string) URL to fetch the body content from (default: `''`).\n    - `buttons`: (array) An array of button objects. Each object should have a `label`, `class`, and `onClick` function (default: `[]`).\n    - `safeInstance`: (boolean) Keep the modal instance after it's closed (default: `false`).\n    - `disableFullscreen`: (boolean) Disable the fullscreen button (default: `false`).\n    - `disableClose`: (boolean) Disable the close button (default: `false`).\n    - `removeFullscreenBtn`: (boolean) Remove the fullscreen button (default: `false`).\n    - `removeCloseBtn`: (boolean) Remove the close button (default: `false`).\n    - `loader`: (object) An instance of AvalynxLoader to use as the loader for the modal (default: `null`).\n    - `onModalCreated`: (function) A callback function to execute when the modal is created (default: `null`).\n    - `onFullscreenToggled`: (function) A callback function to execute when the fullscreen mode is toggled (default: `null`).\n    - `onModalClosed`: (function) A callback function to execute when the modal is closed (default: `null`).\n\n## Contributing\n\nContributions are welcome! If you'd like to contribute, please fork the repository and submit a pull request with your changes or improvements. We're looking for contributions in the following areas:\n\n- Bug fixes\n- Feature enhancements\n- Documentation improvements\n\nBefore submitting your pull request, please ensure your changes are well-documented and follow the existing coding style of the project.\n\n## License\n\nAvalynxModal is open-sourced software licensed under the [MIT license](LICENSE).\n\n## Contact\n\nIf you have any questions, feature requests, or issues, please open an issue on our [GitHub repository](https://github.com/avalynx/avalynx-modal/issues) or submit a pull request.\n\nThank you for considering AvalynxModal for your project!\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Favalynx%2Favalynx-modal","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Favalynx%2Favalynx-modal","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Favalynx%2Favalynx-modal/lists"}