iModal :: Bootstrap 5

iModal is a lightweight helper for creating Bootstrap 5 modals programmatically with a simple JavaScript API. It is especially useful for dynamic content, loading states, AJAX responses, and quick UI interactions.

For Bootstrap 4 see the b4 branch.

Features

• Create modals with a single line of code.
• Customize size, title, body, footer, backdrop, colors, and animation.
• Update modal content dynamically.
• Use built-in lifecycle hooks such as onShow, onShown, onHide, and onHidden.
• Works well for loading states and AJAX-driven UI.

Installation

Using npm

npm install @guxmartin/imodal

...or directly in the browser

<script src="./dist/iModal.umd.js"></script>

Quick start

ES module

import iModal from '@guxmartin/imodal';

window.iModal = iModal;

new iModal({
  title: 'Hello world',
  body: '<p>This is a modal created with iModal.</p>'
});

Browser global

<script src="./dist/iModal.umd.js"></script>
<script>
  new window.iModal({
    title: 'Hello world',
    body: '<p>This is a modal created with iModal.</p>'
  });
</script>

Basic usage

new iModal();

// Update the modal body later
iModal.body('<p>Custom HTML</p>');

// Use a custom title and body
new iModal({
  title: 'My modal',
  body: 'Loading...'
});

Common options

new iModal({
  size: 'lg',
  fullscreen: true,
  title: 'Custom title',
  closeText: 'Close',
  body: 'Hello from iModal',
  bg: 'success',
  headerClass: 'primary',
  footerClass: 'secondary',
  header: true,
  footer: true,
  backdrop: true,
  keyboard: true,
  draggable: true,
  dialogScrollable: true,
  dialogCentered: true,
  fade: true,
  autoHide: true,
  autoHideTime: 3000
});

Methods

new iModal();

iModal.isActive(); // returns true if a modal is active
iModal.hide();     // hides the modal
iModal.remove();   // removes the modal completely
console.log(iModal.version); // current library version

Global settings

iModal.setSettings({
  size: 'lg',
  title: 'My project',
  backdrop: false,
  draggable: true
});

Development

Install dependencies

npm install

Start the local demo

npm start

Build the library

npm run build

Run tests

npm test

Documentation and examples

See the demo page at https://guxmartin.github.io/iModal/examples/.