iModal :: Bootstrap 4

One modal to rule them all

Parameter	Description	Type	Default	Options
id	Modal identificator	string	iModal	Valid id string
size	Size of the modal	string		'sm', 'lg', 'xl'
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	Loading...
headerClass	Header background color	string		'success', 'primary', 'info', 'warning', 'danger', 'secondary'
footerClass	Footer background color	string		'success', 'primary', 'info', 'warning', 'danger', 'secondary'
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'
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
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

Examples

Default

iModal();

Update body

iModal();
$('#iModal .modal-body').html('Custom html');

Custom id

iModal({id:'my_modal'});

Sizes

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

Custom title

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

Custom close button text

iModal({closeText:'Cerrar'});

Default body

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

Header class

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

Footer class

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

Hide header - footer

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

Backdrop

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

Backdrop color

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

Keyboard

iModal({keyboard:false});

Dialog scrollable

iModal({dialogScrollable:true});

Vertically centered

iModal({dialogCentered:true});

Fade animation

iModal({fade:false});

Events

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

Combine

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

Global configurations (After the iModal.js)

Object declaration

iModalSettings = {
  id: 'my_modal',
  size: 'lg',
  title: 'My project',
  backdrop: false,
};

or individual

iModalSettings.closeText = 'Cerrar';
iModalSettings.body = 'Loading...';

Another examples

JQuery AJAX

// HTML
<button type="button" onclick="muFunction();">Button</button>

// JavaScript
function muFunction(){
  $.ajax({
    type: 'POST',
    url: '/url/to',
    beforeSend: function(){
      iModal({title:'My title'});
    },
    success: function(response){
      $("#iModal .modal-body").html(response);
    },
  });
}

Vue

Load a component inside iModal

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