https://github.com/franbar1966/bootstrap-5-modal-dynamic
Bootstrap 5 modals with dynamically loaded content, open modals within modals and possibility to close the modal with the back button.
https://github.com/franbar1966/bootstrap-5-modal-dynamic
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
Last synced: 7 months ago
JSON representation
Bootstrap 5 modals with dynamically loaded content, open modals within modals and possibility to close the modal with the back button.
- Host: GitHub
- URL: https://github.com/franbar1966/bootstrap-5-modal-dynamic
- Owner: FranBar1966
- License: mit
- Created: 2025-05-12T14:39:30.000Z (8 months ago)
- Default Branch: master
- Last Pushed: 2025-05-16T18:37:26.000Z (8 months ago)
- Last Synced: 2025-06-08T13:06:56.745Z (8 months ago)
- 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
- Language: HTML
- Homepage: https://franbar1966.github.io/bootstrap-5-modal-dynamic/example/
- Size: 158 KB
- Stars: 5
- Watchers: 2
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Bootstrap 5 Dynamic Modal Loader
**Dynamic loading of content in bootstrap 5 modal and modal on top of modal***
[](https://franbar1966.github.io/bootstrap-5-modal-dynamic/example/)
A 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)
## Features
- **Preserves all native** Bootstrap modal functionality
- **No conflicts** with existing modal implementations
- Load modal content via AJAX or DOM elements
- Support for nested modals
- Dynamic template cloning
- Customizable modal options via data attributes
- No dependencies other than Bootstrap 5
- Lightweight (~5KB minified)
- Works seamlessly with [Modal Back Button Closer](https://github.com/FranBar1966/bootstrap-5-modal-close-on-back)
## Installation
### Via CDN
```html
```
### Download
Download the script from GitHub repository: [modal dynamic](https://github.com/FranBar1966/bootstrap-5-modal-dynamic) and include in your HTML:
```html
```
## Configuration Options
All options are set via data attributes:
| Attribute | Required | Description |
|-------------------------|----------|-----------------------------------------------------------------------------|
| `href="#modal-id"` | Yes | Target modal ID (must start with #) |
| `data-template="#id"` | Yes | Template modal ID to clone (must start with #) |
| `data-url="/url"` | Yes* | Load content from URL |
| `data-url="#id"` | Yes* | Load content from #id |
| `data-title="Text"` | No | Sets modal title text |
| `data-header="#id"` | No | Load header content from DOM element |
| `data-noheader="true"` | No | Hides modal header when true |
| `data-nofooter="true"` | No | Hides modal footer when true |
| `data-width="500"` | No | Sets width (accepts px, %, or unitless values) |
| `data-class="class"` | No | Adds CSS classes to modal (multiple classes space-separated) |
| `data-keyboard="false"` | No | Disables ESC key close (default: true) |
| `data-backdrop="static"`| No | Backdrop behavior, default none |
> *Note: Either `data-url` with URL or `data-url` with DOM selector (#element) is required
> *Note: that you cannot mix the options with Bootstrap's (data-bs..) native modal
## JavaScript Events
The library dispatches custom events when content loading completes or fails:
#### `neutralFetchCompleted`
Dispatched when content is successfully loaded.
**Event Properties:**
```javascript
detail: {
element: HTMLElement, // The modal element
url: String // The URL or selector used
}
```
**Usage Example:**
```javascript
window.addEventListener('neutralFetchCompleted', (event) => {
const { element, url } = event.detail;
console.log('Content loaded for:', url);
});
```
#### `neutralFetchError`
Dispatched when content loading fails.
**Event Properties:**
```javascript
detail: {
element: HTMLElement, // The modal element
url: String, // The URL or selector used
}
```
**Usage Example:**
```javascript
window.addEventListener('neutralFetchError', (event) => {
const { element, url } = event.detail;
console.error('Failed to load:', url);
// Add error handling logic here
element.querySelector('.modal-body').innerHTML = `
Failed to load content
`;
});
```
## Usage
Add the .modal-dynamic class to the link to open the button, the following link has the minimum options:
```html
Open modal
```
### Same modal with different dynamic content
You 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.
```html
Example login
```
### Modal over modal
You can open a modal inside another modal. The container can be of any kind, but the one that is opened must be: modal-dynamic
```html
Modal over modal
Open modal
```
### See: [DEMO](https://franbar1966.github.io/bootstrap-5-modal-dynamic/example/)
## License
The MIT License (MIT)