iModal :: Bootstrap 5

Dinamic and simple modal generator
One modal to rule them all

Quick start

Create a modal in one line, then update the content whenever you need.

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

How it works

  1. Create the modal with a title and body.
  2. Use iModal.body(...) to change the content later.
  3. Close it with iModal.hide() or let it disappear automatically.

Common options

Most useful options: title, body, size, bg, draggable, backdrop, dialogCentered, and autoHide.

These are enough to create simple, polished modals without needing to remember the full API.

Methods

Method Description
iModal.setSettings(object) Set global settings
iModal.isActive() return boolean
iModal.hide() Graceful hidden iModal
iModal.remove() remove iModal
iModal.version return iModal version

More examples

A few extra combinations to explore once the basics feel familiar.

Default

new iModal();

Sizes

new iModal({size:'lg'});

Fullscreen & Fullscreen responsive

new iModal({fullscreen:true});
// More options: sm, md, lg, xl, xxl, true, false

Custom title

new iModal({title:'Hello world'});

Update body

iModal.body('Custom html');

Colors

new iModal({bg:'success'});

Auto hide

new iModal({autoHide:true, autoHideTime:1800});

Backdrop

new iModal({backdrop:false});

Draggable

new iModal({draggable:true});

Dialog centered

new iModal({dialogCentered:true});

Quick reference

Useful methods: iModal.hide(), iModal.remove(), and iModal.isActive().

Useful options: title, body, size, bg, backdrop, and autoHide.

What you can explore next

Try changing the modal title, body, size, color, or backdrop to see how the library behaves.

For most use cases, the basic API is enough to build a polished experience quickly.

Auto hide

new iModal({title:'Success',bg:'success',autoHide:true});
new iModal({title:'Success',bg:'success',autoHide:true,autoHideTime:3000});

Events

new iModal({ onShow: function(){ alert('Show'); } });
new iModal({ onShowed: function(){ alert('Showed'); } });
new iModal({ onHide: function(){ alert('Hide'); } });
new iModal({ onHidden: function(){ alert('Hidden'); } });
new iModal({ backdrop: 'static', onHidePrevented: function(){ alert('Hide Prevented'); } });

Custom id

new iModal({id:'my_modal'});

Combine

new iModal({
    id:'my_modal',
    size:'sm',
    title:'Custom modal',
    closeText:'Cerrar',
    body:'Cargando...',
    headerClass:'success',
    footerClass:'success',
    backdrop:false,
    keyboard:false,
    dialogCentered:true,
    fade:false,
    autoHide:true,
    autoHideTime:3000,
  });

isActive?

function isActive(){
    alert(iModal.isActive());
  }
  
  iModal({
    body: `<button class='btn btn-primary' onclick='isActive();'>isActive?</button>`
  });

hide

function hide(){
  iModal.hide();
}

iModal({
  body: `<button class='btn btn-primary' onclick='hide();'>Hide modal</button>`
});

remove

function remove(){
  iModal('remove');
}

iModal({
  body: `<button class='btn btn-primary' onclick='remove();'>Remove modal</button>`
});

version

alert(iModal.version);

Global configurations (After the iModal.js)

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

Documentation

See all the documentation in GitHub.