Elegant, responsive, flexible and lightweight modal plugin with jQuery.
| Fast | Responsive | Animated | Lightweight | Customizable | All modern browsers |
|---|---|---|---|---|---|
 |
|
|
|
|
|
$("#modal").iziModal({
title: "",
subtitle: "",
theme: "",
headerColor: "#88A0B9",
overlayColor: "rgba(0, 0, 0, 0.4)",
iconColor: "",
iconClass: null,
width: 600,
padding: 0,
iframe: false,
iframeHeight: 400,
iframeURL: null,
overlayClose: true,
closeOnEscape: true,
bodyOverflow: false,
focusInput: true,
autoOpen: false,
transitionInModal: 'transitionIn',
transitionOutModal: 'transitionOut',
transitionInOverlay: 'fadeIn',
transitionOutOverlay: 'fadeOut',
onOpening: function() {},
onOpened: function() {},
onClosing: function() {},
onClosed: function() {}
});| Argument | Default Value | Description |
|---|---|---|
| title | "" | Title that appears in the modal header. |
| subtitle | "" | Caption that appears in the header below the title. |
| iconClass | null | Icon class (font-icon of your choice) that will be displayed in modal header. |
| headerColor | #6d7d8d | Color to fill the header background, will also be applied to the bottom edge of the modal. |
| overlayColor | rgba(0,0,0,0.4) | Color overlay. |
| width | 600 | Fixed width of the modal. You can use %, px, em or cm. If not using an unit of measure. It will be taken over the px unit. |
| padding | 0 | Margin that will be applied to the inside of the modal. |
| iframe | false | Set true to apply an iframe inside the modal. |
| iframeHeight | null | Fixed height of the iframe. |
| iframeURL | null | Address that will open in the iframe inside the modal, if not set, the user can alternatively use the href link responsible for opening it. |
| overlayClose | true | If set true, you can close the modal just by clicking on the outer layer of dark modal. |
| closeOnEscape | true | If set true, you can close the modal only pressing the escape key. |
| bodyOverflow | false | Forcing overflow hidden in the document when opening the modal, closing the modal, overflow will be restored. |
| focusInput | true | If set true, whenever you open a modal, the first visible field is active. |
| autoOpen | false | If set true, the modal opens automatically without any user action. |
| transitionInModal | transitionIn | Modal opening default transition. |
| transitionOutModal | transitionOut | Modal closing default transition. |
| transitionInOverlay | fadeIn | Default transition of overlay opening. |
| transitionOutOverlay | fadeOut | Default transition of overlay closure. |
| onOpening | function() {} | Callback function that will run when opening the modal. |
| onOpened | function() {} | Callback function that will run when the modal is open. |
| onClosing | function() {} | Callback function that will run when closing the modal. |
| onClosed | function() {} | Callback function that will run when the modal is closed. |
- Instantiating
$('#modal').iziModal();- Open
$('#modal').iziModal('open');- Close
$('#modal').iziModal('close');- getState
/**
* @returns {'closed'|'closing'|'opened'|'opening'}
*/
$('#modal').iziModal('getState');- startLoading
$('#modal').iziModal('startLoading');- stopLoading
$('#modal').iziModal('stopLoading');- Destroy
$('#modal').iziModal('destroy');- setHeaderColor
$('#modal').iziModal('setHeaderColor', 'color');- setTitle
$('#modal').iziModal('setTitle', 'Title');- setSubtitle
$('#modal').iziModal('setSubtitle', 'Subtitle');- setIconClass
$('#modal').iziModal('setIconClass', 'iconClass');- recalculateLayout
$('#modal').iziModal('recalculateLayout');- Opening
$(document).on('opening', '#modal', function (e) {
//console.log('Modal is opening');
});- Opened
$(document).on('opened', '#modal', function (e) {
//console.log('Modal is opened');
});- Closing
$(document).on('closing', '#modal', function (e) {
//console.log('Modal is closing');
});- Closed
$(document).on('closed', '#modal', function (e) {
// console.log('Modal is closed');
});