{"id":28497886,"url":"https://github.com/franbar1966/bootstrap-5-modal-dynamic","last_synced_at":"2025-07-03T13:32:31.169Z","repository":{"id":292875696,"uuid":"982213360","full_name":"FranBar1966/bootstrap-5-modal-dynamic","owner":"FranBar1966","description":"Bootstrap 5  modals with dynamically loaded content, open modals within modals and possibility to close the modal with the back button.","archived":false,"fork":false,"pushed_at":"2025-05-16T18:37:26.000Z","size":162,"stargazers_count":5,"open_issues_count":0,"forks_count":1,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-06-08T13:06:56.745Z","etag":null,"topics":["bootstrap-5","bootstrap-modal","bootstrap-modals","bootstrap5","bootstrap5-modal","javascript-modal","js-modal","login-modal","modal-bootstrap","modal-dialogs","modal-form","modal-forms","modal-plugin","modal-popup","modals"],"latest_commit_sha":null,"homepage":"https://franbar1966.github.io/bootstrap-5-modal-dynamic/example/","language":"HTML","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/FranBar1966.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":"2025-05-12T14:39:30.000Z","updated_at":"2025-05-19T12:59:55.000Z","dependencies_parsed_at":"2025-05-12T16:42:33.111Z","dependency_job_id":null,"html_url":"https://github.com/FranBar1966/bootstrap-5-modal-dynamic","commit_stats":null,"previous_names":["franbar1966/bootstrap-5-modal-dynamic"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/FranBar1966/bootstrap-5-modal-dynamic","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/FranBar1966%2Fbootstrap-5-modal-dynamic","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/FranBar1966%2Fbootstrap-5-modal-dynamic/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/FranBar1966%2Fbootstrap-5-modal-dynamic/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/FranBar1966%2Fbootstrap-5-modal-dynamic/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/FranBar1966","download_url":"https://codeload.github.com/FranBar1966/bootstrap-5-modal-dynamic/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/FranBar1966%2Fbootstrap-5-modal-dynamic/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":263335497,"owners_count":23450862,"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":["bootstrap-5","bootstrap-modal","bootstrap-modals","bootstrap5","bootstrap5-modal","javascript-modal","js-modal","login-modal","modal-bootstrap","modal-dialogs","modal-form","modal-forms","modal-plugin","modal-popup","modals"],"created_at":"2025-06-08T13:06:56.266Z","updated_at":"2025-07-03T13:32:31.160Z","avatar_url":"https://github.com/FranBar1966.png","language":"HTML","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Bootstrap 5 Dynamic Modal Loader\n\n**Dynamic loading of content in bootstrap 5 modal and modal on top of modal***\n\n[![Demo](https://img.shields.io/badge/▶-Live_Demo-blue?style=flat)](https://franbar1966.github.io/bootstrap-5-modal-dynamic/example/)\n\nA lightweight solution for loading dynamic content into Bootstrap 5 modals and handling modal stacking. Highly recommended for use with: [modal close on back buttom](https://github.com/FranBar1966/bootstrap-5-modal-close-on-back)\n\n## Features\n\n- **Preserves all native** Bootstrap modal functionality\n- **No conflicts** with existing modal implementations\n- Load modal content via AJAX or DOM elements\n- Support for nested modals\n- Dynamic template cloning\n- Customizable modal options via data attributes\n- No dependencies other than Bootstrap 5\n- Lightweight (~5KB minified)\n- Works seamlessly with [Modal Back Button Closer](https://github.com/FranBar1966/bootstrap-5-modal-close-on-back)\n\n## Installation\n\n### Via CDN\n\n```html\n\u003cscript src=\"https://cdn.jsdelivr.net/gh/FranBar1966/bootstrap-5-modal-dynamic@0.0.1/src/modal-dynamic.min.js\"\u003e\u003c/script\u003e\n```\n\n### Download\n\nDownload the script from GitHub repository: [modal dynamic](https://github.com/FranBar1966/bootstrap-5-modal-dynamic) and include in your HTML:\n\n```html\n\u003cscript src=\"path/to/modal-dynamic.min.js\"\u003e\u003c/script\u003e\n```\n\n## Configuration Options\n\nAll options are set via data attributes:\n\n| Attribute               | Required | Description                                                                 |\n|-------------------------|----------|-----------------------------------------------------------------------------|\n| `href=\"#modal-id\"`      | Yes      | Target modal ID (must start with #)                                         |\n| `data-template=\"#id\"`   | Yes      | Template modal ID to clone (must start with #)                              |\n| `data-url=\"/url\"`       | Yes*     | Load content from URL                                                       |\n| `data-url=\"#id\"`        | Yes*     | Load content from #id                                                       |\n| `data-title=\"Text\"`     | No       | Sets modal title text                                                       |\n| `data-header=\"#id\"`     | No       | Load header content from DOM element                                        |\n| `data-noheader=\"true\"`  | No       | Hides modal header when true                                                |\n| `data-nofooter=\"true\"`  | No       | Hides modal footer when true                                                |\n| `data-width=\"500\"`      | No       | Sets width (accepts px, %, or unitless values)                              |\n| `data-class=\"class\"`    | No       | Adds CSS classes to modal (multiple classes space-separated)                |\n| `data-keyboard=\"false\"` | No       | Disables ESC key close (default: true)                                      |\n| `data-backdrop=\"static\"`| No       | Backdrop behavior, default none                                             |\n\n\u003e *Note: Either `data-url` with URL or `data-url` with DOM selector (#element) is required\n\n\u003e *Note: that you cannot mix the options with Bootstrap's (data-bs..) native modal\n\n## JavaScript Events\n\nThe library dispatches custom events when content loading completes or fails:\n\n#### `neutralFetchCompleted`\nDispatched when content is successfully loaded.\n\n**Event Properties:**\n```javascript\ndetail: {\n  element: HTMLElement,  // The modal element\n  url: String            // The URL or selector used\n}\n```\n\n**Usage Example:**\n```javascript\nwindow.addEventListener('neutralFetchCompleted', (event) =\u003e {\n  const { element, url } = event.detail;\n  console.log('Content loaded for:', url);\n});\n```\n\n#### `neutralFetchError`\n\nDispatched when content loading fails.\n\n**Event Properties:**\n```javascript\ndetail: {\n  element: HTMLElement,  // The modal element\n  url: String,           // The URL or selector used\n}\n```\n\n**Usage Example:**\n```javascript\nwindow.addEventListener('neutralFetchError', (event) =\u003e {\n  const { element, url } = event.detail;\n  console.error('Failed to load:', url);\n  // Add error handling logic here\n  element.querySelector('.modal-body').innerHTML = `\n    \u003cdiv class=\"alert alert-danger\"\u003e\n      Failed to load content\n    \u003c/div\u003e\n  `;\n});\n```\n\n## Usage\n\nAdd the .modal-dynamic class to the link to open the button, the following link has the minimum options:\n\n```html\n\u003ca class=\"modal-dynamic\" href=\"#modal-id\" data-url=\"/url\" data-template=\"#template-id\"\u003eOpen modal\u003c/a\u003e\n\n\u003cdiv id=\"template-id\" class=\"modal\" tabindex=\"-1\"\u003e\n  \u003cdiv class=\"modal-dialog\"\u003e\n    \u003cdiv class=\"modal-content\"\u003e\n      \u003cdiv class=\"modal-header\"\u003e\n        \u003ch5 class=\"modal-title\"\u003eModal title\u003c/h5\u003e\n        \u003cbutton type=\"button\" class=\"btn-close\" data-bs-dismiss=\"modal\" aria-label=\"Close\"\u003e\u003c/button\u003e\n      \u003c/div\u003e\n      \u003cdiv class=\"modal-body\"\u003e\n        \u003cp\u003eThe content of body will be dynamically substituted by data-url.\u003c/p\u003e\n      \u003c/div\u003e\n      \u003cdiv class=\"modal-footer\"\u003e\n        \u003cbutton type=\"button\" class=\"btn btn-secondary\" data-bs-dismiss=\"modal\"\u003eClose\u003c/button\u003e\n      \u003c/div\u003e\n    \u003c/div\u003e\n  \u003c/div\u003e\n\u003c/div\u003e\n```\n\n### Same modal with different dynamic content\n\nYou can group a modal with the same ID, to display different content loaded dynamically in the same modal. The [demo](https://franbar1966.github.io/bootstrap-5-modal-dynamic/example/) has included in the help button “?” a link to open another modal, I think this would be an acceptable example to open a modal inside another modal.\n\n```html\n\u003ca type=\"button\"\n   class=\"btn btn-primary modal-dynamic\"\n   href=\"#modal-user\"\n   data-title=\"Sign up\"\n   data-url=\"login.html\"\n   data-width=\"475\"\n   data-class=\"fade\"\n   data-template=\"#templateUser\"\n   data-keyboard=\"true\"\n   data-backdrop=\"static\"\n   \u003e\n    Example login\n\u003c/a\u003e\n\n\u003cdiv class=\"modal fade\" id=\"templateUser\" tabindex=\"-1\" aria-labelledby=\"template1Label\" aria-hidden=\"true\"\u003e\n  \u003cdiv class=\"modal-dialog shadow\"\u003e\n    \u003cdiv class=\"modal-content\"\u003e\n      \u003cdiv class=\"modal-header\"\u003e\n        \u003ch1 class=\"modal-title fs-5\" id=\"template1Label\"\u003eModal title\u003c/h1\u003e\n        \u003cbutton type=\"button\" class=\"btn-close\" data-bs-dismiss=\"modal\" aria-label=\"Close\"\u003e\u003c/button\u003e\n      \u003c/div\u003e\n      \u003cdiv class=\"modal-body mx-4 my-3\"\u003e\n        \u003cdiv class=\"spinner-border\" role=\"status\"\u003e\n          \u003cspan class=\"sr-only\"\u003eLoading...\u003c/span\u003e\n        \u003c/div\u003e\n      \u003c/div\u003e\n      \u003cdiv class=\"modal-footer\"\u003e\n        \u003cdiv class=\"ms-md-0\"\u003e\n          \u003ca type=\"button\"\n            class=\"btn btn-primary modal-dynamic\"\n            href=\"#modal-user\"\n            data-title=\"Reminder\"\n            data-url=\"reminder.html\"\n            data-width=\"475\"\n            data-class=\"fade\"\n            data-template=\"#templateUser\"\n            data-keyboard=\"true\"\n            data-backdrop=\"static\"\u003e\n              Reminder\n          \u003c/a\u003e\n        \u003c/div\u003e\n        \u003cdiv class=\"ms-md-auto\"\u003e\n          \u003ca type=\"button\"\n            class=\"btn btn-primary modal-dynamic\"\n            href=\"#modal-user\"\n            data-title=\"Sign in\"\n            data-url=\"login.html\"\n            data-width=\"475\"\n            data-class=\"fade\"\n            data-template=\"#templateUser\"\n            data-keyboard=\"true\"\n            data-backdrop=\"static\"\u003e\n              Login\n          \u003c/a\u003e\n          \u003ca type=\"button\"\n              class=\"btn btn-primary modal-dynamic\"\n              href=\"#modal-user\"\n              data-title=\"Sign up\"\n              data-url=\"register.html\"\n              data-width=\"475\"\n              data-class=\"fade\"\n              data-template=\"#templateUser\"\n              data-keyboard=\"true\"\n              data-backdrop=\"static\"\u003e\n                Register\n          \u003c/a\u003e\n        \u003c/div\u003e\n      \u003c/div\u003e\n    \u003c/div\u003e\n  \u003c/div\u003e\n\u003c/div\u003e\n```\n\n### Modal over modal\n\nYou can open a modal inside another modal. The container can be of any kind, but the one that is opened must be: modal-dynamic\n\n```html\n\u003c!-- First modal --\u003e\n\u003cbutton\n  type=\"button\"\n  class=\"btn btn-primary\"\n  data-bs-toggle=\"modal\"\n  data-bs-target=\"#exampleModal2\"\n\u003e\n  Modal over modal\n\u003c/button\u003e\n\n\u003c!-- Within the first modal --\u003e\n\u003ca type=\"button\"\n  class=\"btn btn-primary modal-dynamic\"\n  href=\"#modal-over-over\"\n  data-title=\"Modal over modal\"\n  data-url=\"#modal-content-over\"\n  data-width=\"400\"\n  data-class=\"fade\"\n  data-template=\"#template1\"\n  data-keyboard=\"true\"\n  data-backdrop=\"\"\u003e\n    Open modal\n\u003c/a\u003e\n```\n\n### See: [DEMO](https://franbar1966.github.io/bootstrap-5-modal-dynamic/example/)\n\n## License\n\nThe MIT License (MIT)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffranbar1966%2Fbootstrap-5-modal-dynamic","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ffranbar1966%2Fbootstrap-5-modal-dynamic","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffranbar1966%2Fbootstrap-5-modal-dynamic/lists"}