Elegant, responsive, flexible and lightweight modal plugin with jQuery.
Fast | Responsive | Animated | Lightweight | Customizable | All modern browsers |
---|---|---|---|---|---|
v1.0.1
- overlayClose funcionava apenas a primeira vez - Corrigido.
$("#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');
});