iModal :: Bootstrap 5

Dinamic and simple modal generator
One modal to rule them all

Quick examples: and more...

Options

Object parameter Description Type Default Options
id Modal identificator string iModal Valid id string
size Size of the modal string 'sm', '', 'lg', 'xl'
fullscreen Modal fulscreen or break fullscreen point boolean or string true, false, 'sm', 'md', 'lg', 'xl', 'xxl'
title Title of the modal string Any text
closeText Text of the close button string Close Any text
body Default body to show text or scaped HTML
bg Background color string 'success', 'primary', 'info', 'warning', 'danger', 'secondary', 'dark', 'light'
headerClass Header background color string 'success', 'primary', 'info', 'warning', 'danger', 'secondary', 'dark', 'light'
footerClass Footer background color string 'success', 'primary', 'info', 'warning', 'danger', 'secondary', 'dark', 'light'
header Show/hide header boolean true true, false
footer Show/hide footer boolean true true, false
backdrop Includes a modal-backdrop element boolean or the string 'static' true true, false, 'static'
backdropColor Modal-backdrop color false or string false false, 'success', 'primary', 'info', 'warning', 'danger', 'secondary', 'dark', 'light'
keyboard Closes the modal when escape key is pressed boolean true true, false
dialogScrollable Scroll the modal body boolean false true, false
dialogCentered Modal vertically center boolean false true, false
fade Fade animation boolean true true, false
autoHide Auto hide after n time boolean true true, false
autoHideTime Auto hide miliseconds time Integer 1000
onShow Function to execute before show modal function
onShowed Function to execute after show modal function
onHide Function to execute before hide modal function
onHidden Function to execute after hide modal function
onHidePrevented Function to execute on click backdrop static function

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

Examples

Default

new iModal();

Sizes

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

Fullscreen

new iModal({fullscreen:true});
new iModal({fullscreen:'sm'});
new iModal({fullscreen:'md'});
new iModal({fullscreen:'lg'});
new iModal({fullscreen:'xl'});
new iModal({fullscreen:'xxl'});
new iModal({fullscreen:false});

Custom title

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

Custom close button text

new iModal({closeText:'Cerrar'});

Default body

new iModal({body:''});
new iModal({body:'Loading'});
new iModal({body:`<div class='text-center'>Loading</div>`});

Update body

new iModal();
iModal.body(`Custom html`);

Background class

new iModal({bg:'success',title:'Success'});
new iModal({bg:'primary',title:'Primary'});
new iModal({bg:'info',title:'Info'});
new iModal({bg:'warning',title:'Warning'});
new iModal({bg:'danger',title:'Danger'});
new iModal({bg:'secondary',title:'Secondary'});
new iModal({bg:'dark',title:'Dark'});
new iModal({bg:'light',title:'Light'});

Header class

new iModal({headerClass:'success',title:'Success'});
new iModal({headerClass:'primary',title:'Primary'});
new iModal({headerClass:'info',title:'Info'});
new iModal({headerClass:'warning',title:'Warning'});
new iModal({headerClass:'danger',title:'Danger'});
new iModal({headerClass:'secondary',title:'Secondary'});
new iModal({headerClass:'dark',title:'Dark'});
new iModal({headerClass:'light',title:'Light'});

Footer class

new iModal({footerClass:'success'});
new iModal({footerClass:'primary'});
new iModal({footerClass:'info'});
new iModal({footerClass:'warning'});
new iModal({footerClass:'danger'});
new iModal({footerClass:'secondary'});
new iModal({footerClass:'dark'});
new iModal({footerClass:'light'});

Hide header - footer

new iModal({header:false});
new iModal({footer:false});
new iModal({header:false,footer:false});

Backdrop

new iModal({backdrop:false});
new iModal({backdrop:'static'});

Backdrop color

new iModal({backdropColor:'success'});
new iModal({backdropColor:'primary'});
new iModal({backdropColor:'info'});
new iModal({backdropColor:'warning'});
new iModal({backdropColor:'danger'});
new iModal({backdropColor:'secondary'});
new iModal({backdropColor:'dark'});
new iModal({backdropColor:'light'});

Keyboard

new iModal({keyboard:false});

Dialog scrollable

new iModal({dialogScrollable:true});

Vertically centered

new iModal({dialogCentered:true});

Fade animation

new iModal({fade:false});

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,
  });

Another examples

Fetch call

// HTML
  <button type="button" onclick="myFunction();">Button</button>
  
  // JavaScript
  function myFunction(){
    new iModal({title:'My title'});
    fetch(`/url/to`)
      .then(res => res.text())
      .then(res => iModal.body(res));
  }

JQuery AJAX

// HTML
  <button type="button" onclick="myFunction();">Button</button>
  
  // JavaScript
  function myFunction(){
    $.ajax({
      type: 'POST',
      url: '/url/to',
      beforeSend: () => new iModal({title:'My title'}),
      success: res => iModal.body(res),
    });
  }

Vue

Load a component inside iModal
let myComponent;
new iModal({
  title: 'My Component',
  body: `<div id="async-div"></div>`,
  onShow: () => {
    myComponent = new AnotherComponent().$mount('#async-div');
    myComponent.someData = 123;
    myComponent.someMethod();
  },
  // Recomended: destroy component on modal hide
  onHidden: () => myComponent.$destroy(),
});

More custimizations

// Body without padding
  document.querySelector('#iModal .modal-body').classList.add('p-0');