iziModal

iziModal

Elegant, responsive, flexible and lightweight modal plugin with jQuery.

izimodal.marcelodolce.com

Fast	Responsive	Animated	Lightweight	Customizable	History	Group Mode	Retina

• All modern browsers are supported (Tested in Chrome, Firefox, Opera, Safari, IE9+ and Edge).
• Bugs? create an issue here.

---

Version Log

• v1.4.0

  • RTL support - Implemented.
  • WAI-ARIA support - Implemented.
  • An error occurred if there was a hash did not belong to the modal - Fixed.
  • It breaks the layout if "iziModal" class is missing - Fixed.
  • The vertical positioning of the modal, sometimes was not applied correctly - Fixed.
  • Transitions of modals positioning do not behave correctly - Fixed.
  • The modals group navigation did not work correctly If any modal was destroyed - Fixed.

• v1.3.3

  • Text icons support (option, data-attr and set method) - Implemented.
  • History was always active on mobile - Fixed.
  • It was not possible to instantiate multiple modals at once - Fixed.

• v1.3.2

  • setGroup to set new group name - Implemented.
  • group option work in some cases - Fixed.

• v1.3.1

  • iframe URL (by event like click) not work with append childs - Fixed.
  • Widths with percentage does not work - Fixed.

• v1.3.0

  • History support - Implemented.
  • Group support (data-iziModal-group) with caption and navigation - Implemented.
  • Methods next and prev to be used on group mode - Implemented.
  • Option Loop and data (data-iziModal-loop) - Implemented.
  • Option pauseOnHover when you have timeout - Implemented.
  • Other Transitions and improvements in CSS - Implemented.
  • Methods setTransitionIn and setTransitionOut - Implemented.
  • data-iziModal-transitionIn and data-iziModal-transitionOut to triggers and modals - Implemented.
  • radius Option, zindex Option and method setZindex - Implemented.
  • Open and Close methods they can be used with different animations - Implemented.
  • data-iziModal-open="modal-id" - Implemented.
  • data-iziModal-title, data-iziModal-subtitle and data-iziModal-icon - Implemented.
  • Callbacks onResize and onFullscreen - Implemented.
  • Event fullscreen and Global Event iziModal-group-change - Implemented.
  • autoOpen option with delay - Implemented.
  • attached option, top or bottom - Implemented.
  • return of the methods were always overwritten - Fixed.
  • Overflow in fullscreen and other minor fixes in js structure - Fixed.

• v1.2.0

  • Retina display support - Implemented.
  • Callbacks had no access to modal functions - Fixed.

• v1.1.0

  • feature to apply fullscreen - Implemented.
  • timeout feature with progress bar - Implemented.

• v1.0.1

  • overlayClose only works the first time - Fixed.

---

Install

npm

npm install izimodal --save

bower

bower install izimodal

GEM

gem install izimodal

---

Data Attributes

• Add data-izimodal-open to any button or link inside or outsite the modal will open it when clicked.

<button data-izimodal-open="modal-id">Open</button>
<!-- Specifying the opening transition -->
<button data-izimodal-open="modal-id" data-izimodal-transitionin="fadeInDown">Open</button>

• Add data-izimodal-close to any button or link inside the modal will close it when clicked.

<button data-izimodal-close="">Close</button>
<!-- Specifying the closing transition -->
<button data-izimodal-close="" data-izimodal-transitionout="bounceOutDown">Close</button>

• Add data-izimodal-fullscreen to any button or link inside the modal will expand it when clicked.

<button data-izimodal-fullscreen>Maximize</button>

• Closes the current and open the Next modal.

<button data-izimodal-next>Next Modal</button>

• Closes the current and open the Previous modal.

<button data-izimodal-prev>Previous Modal</button>

• Add data-izimodal-group to div of the modal for build a group with everyone involved.

<div id="modal" class="iziModal" data-izimodal-group="alerts"></div>

• Sets Loop for the same modals in the group.

<div id="modal" class="iziModal" data-izimodal-loop></div>

• Set a default Title.

<div id="modal" class="iziModal" data-izimodal-title="Welcome to the iziModal"></div>

• Set a default Subtitle.

<div id="modal" class="iziModal" data-izimodal-subtitle="Hello world"></div>

• Set a default Icon class.

<div id="modal" class="iziModal" data-izimodal-icon="icon-star"></div>

• Set a default IconText.

<div id="modal" class="iziModal" data-izimodal-icontext="star"></div>

• Set a default **transitionIn and transitionOut.

<div id="modal" class="iziModal" data-izimodal-transitionin="comingIn" data-izimodal-transitionout="comingOut"></div>

• Attach the modal at the top or bottom of the screen.

<div id="modal" class="iziModal" data-izimodal-attached="bottom">Attach Top/Bottom</div>

---

Default Options

$("#modal").iziModal({
    title: '',
    subtitle: '',
    headerColor: '#88A0B9',
    theme: '',  // light
    attached: '', // bottom, top
    icon: null,
    iconText: null,
    iconColor: '',
    rtl: false,
    width: 600,
    padding: 0,
    radius: 3,
    zindex: 999,
    iframe: false,
    iframeHeight: 400,
    iframeURL: null,
    focusInput: true,
    group: '',
    loop: false,
    navigateCaption: true,
    navigateArrows: true, // closeToModal, closeScreenEdge
    history: true,
    restoreDefaultContent: false,
    autoOpen: 0, // Boolean, Number
    bodyOverflow: false,
    fullscreen: false,
    openFullscreen: false,
    closeOnEscape: true,
    overlay: true,
    overlayClose: true,
    overlayColor: 'rgba(0, 0, 0, 0.4)',
    timeout: false,
    timeoutProgressbar: false,
    pauseOnHover: false,
    timeoutProgressbarColor: 'rgba(255,255,255,0.5)',
    transitionIn: 'comingIn',
    transitionOut: 'comingOut',
    transitionInOverlay: 'fadeIn',
    transitionOutOverlay: 'fadeOut',
    onFullscreen: function(){},
    onResize: function(){},
    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.
headerColor	'#6d7d8d'	Color to fill the header background, will also be applied to the bottom edge of the modal.
theme	''	Theme of the modal, can be empty or "light".
attached	''	Attach the modal at the top or bottom of the screen.
icon	null	Icon class (font-icon of your choice) that will be displayed in modal header.
iconText	null	Icon text (font-icon using text) that will be displayed in modal header.
iconColor	''	Color of the header icon.
rtl	false	Right To Left option.
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.
radius	3	Border-radius that will be applied in modal.
zindex	999	The z-index CSS attribute 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.
focusInput	true	If set true, whenever you open a modal, the first visible field is active.
group	''	Create a group with everyone who has the same name, so can navigate between them.
loop	false	It allows loop with modals of the same group.
navigateCaption	true	Show arrows to inform possible navigation.
navigateArrows	true	Change the layout which displays the arrows to navigate between the modals. Can be: 'closeToModal' or 'closeScreenEdge'.
history	true	Enable browsing history.
restoreDefaultContent	false	Makes return the default modal content to be open again.
autoOpen	0 or false	If set true, the modal opens automatically without any user action.
bodyOverflow	false	Forcing overflow hidden in the document when opening the modal, closing the modal, overflow will be restored.
fullscreen	false	Allow button in header modal to expand.
openFullscreen	false	Force to open modal in fullscreen.
closeOnEscape	true	If set true, you can close the modal only pressing the escape key.
overlay	true	Enable or disable background overlay.
overlayClose	true	If set true, you can close the modal just by clicking on the outer layer of dark modal.
overlayColor	'rgba(0,0,0,0.4)'	Color overlay.
timeout	0 or false	Amount in milliseconds to close the modal or false to disable.
timeoutProgressbar	false	Enable progress bar of timeout.
timeoutProgressbarColor	'rgba(255,255,255,0.5)'	Progress bar color.
pauseOnHover	false	It allows the timeout is paused when the cursor is on the modal.
transitionIn	'comingI'n	Modal opening default transition.
transitionOut	'comingOut'	Modal closing default transition.
transitionInOverlay	'fadeIn'	Default transition of overlay opening.
transitionOutOverlay	'fadeOut'	Default transition of overlay closure.
onFullscreen	function() {}	Callback function that will run when the modal enable or disable full screen.
onResize	function() {}	Callback function that will be executed when a resize occurs.
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.

---

Methods

• Instantiating - Catching instance of modal

var modal = $('#modal').iziModal();
// then you can use:
// modal.iziModal('open');

• Open - Opens the modal window.

$('#modal').iziModal('open');
 
// or with a specific transition of entry.
 
$('#modal').iziModal('open', {
    transition: 'fadeInDown' // Here transitionIn is the same property.
});
 
// or with a specific transition of entry and output.
 
$('#modal').iziModal('open', {
    transitionIn: 'bounceInDown'
    transitionOut: 'bounceOutDown' // TransitionOut will be applied if you have any open modal.
});

• Close - Closes the modal window.

$('#modal').iziModal('close');
 
// or with a specific transition of output.
 
$('#modal').iziModal('close', {
    transition: 'bounceOutDown' // Here transitionOut is the same property.
});

• Toggle - Change to the opposite of the current state.

$('#modal').iziModal('toggle');

• getState - Returns a current state of the modal.

/**
 * @returns {'closed'|'closing'|'opened'|'opening'}
 */
$('#modal').iziModal('getState');

• getGroup - Returns group information.

$('#modal').iziModal('getGroup');

• setGroup - Set a new group name.

$('#modal').iziModal('setGroup', 'alerts');

• Next - Skip to next modal to the same group.

$('#modal').iziModal('next');
 
// or with a specific transition of output.
 
$('#modal').iziModal('next' ,{
    transitionIn: 'bounceInDown'
    transitionOut: 'bounceOutDown'
});

• Prev - Skip to previous modal to the same group.

$('#modal').iziModal('prev');
 
// or with a specific transition of output.
 
$('#modal').iziModal('prev' ,{
    transitionIn: 'bounceInDown'
    transitionOut: 'bounceOutDown'
});

• startLoading - Start overlay loading within the modal.

$('#modal').iziModal('startLoading');

• stopLoading - Stop overlay loading within the modal.

$('#modal').iziModal('stopLoading');

• Destroy - Destroys the modal instance.

$('#modal').iziModal('destroy');

• setHeaderColor - Apply the background color in modal header.

$('#modal').iziModal('setHeaderColor', 'color');

• setTitle - Change the title of the modal.

$('#modal').iziModal('setTitle', 'Title');

• setSubtitle - Change the subtitle of the modal.

$('#modal').iziModal('setSubtitle', 'Subtitle');

• setIcon - Change the class of icon.

$('#modal').iziModal('setIcon', 'icon-home');

• setIconText - Change the text of font icon.

$('#modal').iziModal('setIconText', 'icon');

• setZindex - Change the z-index CSS attribute of the modal.

$('#modal').iziModal('setZindex', 999);

• setTransitionIn - Change the Modal opening transition.

$('#modal').iziModal('setTransitionIn', 'comingIn');
// comingIn, bounceInDown, bounceInUp, fadeInDown, fadeInUp, fadeInLeft, fadeInRight, flipInX

• setTransitionOut - Change the Modal closing transition.

$('#modal').iziModal('setTransitionOut', 'comingOut');
// comingOut, bounceOutDown, bounceOutUp, fadeOutDown, fadeOutUp, , fadeOutLeft, fadeOutRight, flipOutX

• recalculateLayout - Used to recalculate the placement and dimensions of the modal layout.

$('#modal').iziModal('recalculateLayout');

---

Events

• Opening - Capture when the modal is opening.

$(document).on('opening', '#modal', function (e) {
    //console.log('Modal is opening');
});

• Opened - Capture when the modal is open.

$(document).on('opened', '#modal', function (e) {
    //console.log('Modal is opened');
});

• Closing - Capture when the modal is closing.

$(document).on('closing', '#modal', function (e) {
    //console.log('Modal is closing');
});

• Closed - Capture when the modal is closed.

$(document).on('closed', '#modal', function (e) {
    // console.log('Modal is closed');
});

• Fullscreen - Capture when the modal enables or disables the full screen.

$(document).on('fullscreen', '#modal-default', function (e, modal) {
    if(modal.isFullscreen){
        // Enabled
    } else {
        // Disabled
    }
});

• iziModal-group-change - Capture when a modal opens and closes within a group.

$(document).on('iziModal-group-change', function (e, modal) {
    console.info(modal.in); // Modal that came in.
    console.info(modal.out); // Modal that came out.
});