LoadModal.js: Ajax Bootstrap Modal Library Examples

Download Back To CSSScript.Com

A 3KB vanilla JS plugin that loads Bootstrap 5 modal content via Fetch API. No jQuery required. Promise-based callbacks included.

1. Simple Usage

Load content from a URL with default settings.

loadmodal('content-simple.html');

2. Advanced Usage (Form & Buttons)

Load a form, add custom buttons, and handle callbacks.

loadmodal({
    url: 'content-form.html',
    title: 'Login Form',
    id: 'login-modal',
    buttons: {
        'Login': (evt) => {
            alert('Login clicked!');
            // return false to prevent closing
        },
        'Cancel': false // Closes dialog
    }
});

3. Chained Callbacks

Use the promise-style API for events.

loadmodal({ url: 'content-simple.html', title: 'Event Test' })
    .create(() => console.log('Created'))
    .show(() => console.log('Shown'))
    .close(() => console.log('Closed'));