Open navigation
Documentation See also iziToast.js

jQueryIZIMODAL v1.6.0

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


Others examples
Star Download

A plugin for perky developers.


All modern browsers are supported.

Bugs? create an issue here.

1.6.0 (Updated on Jan 05, 2018)

  • new data-iziModal-preventClose - Implemented

  • new startProgress, pauseProgress, resumeProgress and resetProgress methods - Implemented

  • new Open multiple Modals - Implemented

  • new arrowKeys option to enable/disable - Implemented

  • new 'border-box' as default - Implemented

  • bug Scrolling the page when the hash changes - Fixed

  • bug Issue #155 - Fixed


  • new appendToOverlay option - Implemented

  • new afterRender option - Implemented

  • new setContent method - Implemented

  • new resetContent method - Implemented

  • bug Modal auto closing after a certain time - Fixed

  • bug Modal auto closing on URL change - Fixed

  • bug Fullscreen - IE9 - Fixed

  • bug Opening and closing functions - IE9 - Fixed

  • bug No Modal closing transition - Fixed


  • new data-iziModal-open="#modal" for any selector - Implemented

  • new background option - Implemented

  • new setBackground method - Implemented

  • new borderBottom option - Implemented

  • new Div tag for modal is no longer required - Implemented

  • new AMD support - Implemented

  • new setFullscreen method - Implemented

  • new setWidth method - Implemented

  • new setTop and setBottom methods - Implemented

  • new closeButton option - Implemented

  • new appendTo option - Implemented

  • new Static margin (Top and Bottom options) - Implemented

  • new Namespace - Implemented

  • new Improvements when using Modal in flexbox layouts - Implemented

  • bug IE Horizontal Alignment (Including %) - Fixed

  • bug Scroll iframe on iOS - Fixed

  • bug Hide navigation arrows does not work - Fixed

  • bug Some kinds of Data-attr do not work as they should - Fixed

  • bug Incompatibility with iziToast animations - Fixed

  • bug Methods setTransitionIn and setTransitionOut - Fixed

  • bug Modal closes when use shortcut arrows - Fixed

  • bug Modal loses its classes when closed - Fixed

  • bug Modal loses option RTL when closed - Fixed

  • bug Modal loses reference if it does not have an ID - Fixed


  • new All the options can now be used through the data-iziModal-optionName attribute - Implemented

  • bug Inaccurate modal height calculation - Fixed

  • bug The Light theme was not applied correctly - Fixed

1.4.0 / 1.4.1

  • new RTL support - Implemented

  • new WAI-ARIA support - Implemented

  • bug An error occurred if there was a hash did not belong to the modal - Fixed

  • bug It breaks the layout if "iziModal" class is missing - Fixed

  • bug The vertical positioning of the modal, sometimes was not applied correctly - Fixed

  • bug Transitions of modals positioning do not behave correctly - Fixed

  • bug The modals group navigation did not work correctly If any modal was destroyed - Fixed


  • new Text icons support (option, data-attr and set method) - Implemented

  • bug History was always active on mobile - Fixed

  • bug It was not possible to instantiate multiple modals at once - Fixed


  • new setGroup to set new group name - Implemented

  • bug group option work in some cases - Fixed


  • bug iframeURL (by event like click) not work with append childs - Fixed

  • bug Widths with percentage does not work - Fixed


  • new History support - Implemented

  • new Group support (data-iziModal-group) with caption and navigation - Implemented

  • new Methods next and prev to be used on group mode - Implemented

  • new Loop option and its data-attr - Implemented

  • new pauseOnHover option when you have timeout - Implemented

  • new Other Transitions and improvements in CSS - Implemented

  • new Methods setTransitionIn and setTransitionOut - Implemented

  • new data-iziModal-transitionIn and data-iziModal-transitionOut to triggers and modals - Implemented

  • new radius option, zindex option and method setZindex - Implemented

  • new Open and Close methods they can be used with different animations - Implemented

  • new data-iziModal-open="#modal" - Implemented

  • new data-iziModal-title, data-iziModal-subtitle and data-iziModal-icon - Implemented

  • new Callbacks onResize and onFullscreen - Implemented

  • new Event fullscreen and Global Event iziModal-group-change - Implemented

  • new autoOpen option with delay - Implemented

  • new attached option, top or bottom - Implemented

  • bug return of the methods were always overwritten - Fixed

  • bug Overflow in fullscreen and other minor fixes in js structure - Fixed


  • new Retina display support - Implemented

  • bug Callbacks had no access to modal functions - Fixed


  • new feature to apply fullscreen - Implemented

  • new timeout feature with progress bar - Implemented


  • bug overlayClose only works the first time - Fixed




                        npm install izimodal --save


                        bower install izimodal


                        gem install izimodal

ICONS › Tested and recommended

One need only incorporate the CSS of icons and use the corresponding class.

HTML › CSS file

Include in the head section.


HTML › JS file

Include before the end of the body. *jQuery is required. Recommended v2.


HTML › In body section



JS › Initializing



JS › Event to open the modal

                            $(document).on('click', '.trigger', function (event) {
                                // $('#modal').iziModal('setZindex', 99999);
                                // $('#modal').iziModal('open', { zindex: 99999 });

Or you can also use.

HTML › Open the modal


HTML › Open the modal

You can also use this button within the modal to open another modals.


                            Another Modal




The modal will capture the href of the link responsible for its opening.


JS › Event to open Modal

If you do not use data-iziModal-open="#modal-name".

                            $(document).on('click', '.trigger', function (event) {
                                // or
                                $('#modal-iframe').iziModal('open', event); // Use "event" to get URL href

JS › Initializing

iframeURL is optional

                        iframe: true,
                        iframeHeight: 800,
                        iframeURL: ""


JS › Ajax opening




                        onOpening: function(modal){


                            $.get('/path/to/file', function(data) {
                                $("#modal .iziModal-content").html(data);




Data Attributes

Trigger › Open

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

If you are in a modal, it will be automatically closed.


Trigger › Close

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


Trigger › Fullscreen

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


Trigger › Next

Closes the current and open the next modal.


Trigger › Previous

Closes the current and open the previous modal.


Data-attributes to modal.

Modal › Group

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

You can navigate between them using the < arrow keys >.


Modal › Loop

Sets loop for the same modals in the group.


Data-attributes to set options. Always will prevail.

Update v1.4.2+

Now all options can be set via data-attrs.


Default Options (53)

                            title: '',
                            subtitle: '',
                            headerColor: '#88A0B9',
                            background: null,
                            theme: '',  // light
                            icon: null,
                            iconText: null,
                            iconColor: '',
                            rtl: false,
                            width: 600,
                            top: null,
                            bottom: null,
                            borderBottom: true,
                            padding: 0,
                            radius: 3,
                            zindex: 999,
                            iframe: false,
                            iframeHeight: 400,
                            iframeURL: null,
                            focusInput: true,
                            group: '',
                            loop: false,
                            arrowKeys: true,
                            navigateCaption: true,
                            navigateArrows: true, // Boolean, 'closeToModal', 'closeScreenEdge'
                            history: false,
                            restoreDefaultContent: false,
                            autoOpen: 0, // Boolean, Number
                            bodyOverflow: false,
                            fullscreen: false,
                            openFullscreen: false,
                            closeOnEscape: true,
                            closeButton: true,
                            appendTo: 'body', // or false
                            appendToOverlay: 'body', // or false
                            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(){},
                            afterRender: function(){}

Default value
title '' Title in modal's header.
subtitle '' Caption below modal's title.
headerColor '#6d7d8d' Color to fill the header background, will also be applied to the bottom edge of the modal.
background 'null' Modal background.
theme '' Theme of the modal, can be empty or "light".
attached Depreciated '' Attach the modal at the top or bottom of the screen.
appendTo New '.body' Where the modal will be placed?
appendToOverlay New '.body' Where the modal overlay will be placed?
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 a measure unity, PX will be assumed as measurement unit.
top New null Top static margin.
bottom New null Bottom static margin.
borderBottom true Enable/disable border bottom.
padding 0 Modal inner margin.
radius 3 Border-radius that will be applied in modal.
zindex 999 The z-index CSS attribute of the modal.
iframe false If true, an Iframe will be used inside the modal.
iframeHeight 400 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 same 'group' name, so can navigate between them.
loop false It allows loop with modals of the same group.
arrowKeys New true Enable control by arrows keys.
navigateCaption true Displays arrows to navigate.
navigateArrows true Change arrows position to navigate between the modals. It can be: 'closeToModal' or 'closeScreenEdge'.
history false Enable browsing history with hash.
restoreDefaultContent false Reset the modal to default to be opened again.
autoOpen 0 or false If true, the modal opens automatically with any user action. Or you can set a delay time (in milliseconds) to open.
bodyOverflow false Forcing overflow hidden in the document when opening the modal, closing the modal, overflow will be restored.
fullscreen false Show a button in modal header 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.
closeButton New true Display close button in the header.
overlay true Enable or disable background overlay.
overlayClose true If set true, the modal will be closed clicking outside of it.
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 timeout progress bar.
timeoutProgressbarColor 'rgba(255,255,255,0.5)' Progress bar color.
pauseOnHover false Pause the progress bar when mouse cursor hover the modal.
transitionIn 'comingIn' Modal opening default transition. Can be: comingIn, bounceInDown, bounceInUp, fadeInDown, fadeInUp, fadeInLeft, fadeInRight, flipInX.
transitionOut 'comingOut' Modal closing default transition. Can be: comingOut, bounceOutDown, bounceOutUp, fadeOutDown, fadeOutUp, , fadeOutLeft, fadeOutRight, flipOutX.
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.
afterRender New function() {} Callback function that will run when the modal structure is ready.


Catching instance of modal

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


Opens the modal window.


                        // 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.


Closes the modal window.


                        // or with a specific transition of output.

                        $('#modal').iziModal('close', {
                            transition: 'bounceOutDown' // Here transitionOut is the same property.


Change to the opposite of the current state.



Returns a current state of the modal.

                         * @returns {'closed'|'closing'|'opened'|'opening'}


Returns group information.



Set a new group name.

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


New Set a new content to modal.

                        $('#modal').iziModal('setContent', '


'); // And you can keep this new content by default. $("#modal").iziModal('setContent', { content: '


', default: true })


New Returns the default Modal content.



Set a new group name.

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


Skip to next modal to the same group.

                        // or with a specific transition of output.

                        $('#modal').iziModal('next' ,{
                            transitionIn: 'bounceInDown'
                            transitionOut: 'bounceOutDown'


Skip to previous modal to the same group.

                        // or with a specific transition of output.

                        $('#modal').iziModal('prev' ,{
                            transitionIn: 'bounceInDown'
                            transitionOut: 'bounceOutDown'

Internal Loading


Start overlay loading within the modal.



Stop overlay loading within the modal.


Progress Control


Start progress loading within the modal.



Pause progress loading within the modal.



Resume progress loading within the modal.



Reset progress loading within the modal.



Destroys the modal instance.



new Change the width of the modal.

                        $('#modal').iziModal('setWidth', 800); // '800px', 100%, '100vw'...


new Change the margin-top of the modal.

                        $('#modal').iziModal('setTop', 100);


new Change the margin-bottom of the modal.

                        $('#modal').iziModal('setBottom', 100);


new Enable/disable Modal header.

                        $('#modal').iziModal('setHeader', false);


Apply the background color in modal header.

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


Apply the Modal background.

                        $('#modal').iziModal('setBackground', 'black');


Change the title of the modal.

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


Change the subtitle of the modal.

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


Change the class of icon.

                        $('#modal').iziModal('setIcon', 'iconClass');


Change the text of font icon.

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


Change the z-index CSS attribute of the modal.

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


Enter the full screen mode.

                        $('#modal').iziModal('setFullscreen', true);


Change the Modal opening transition.

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


Change the Modal closing transition.

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



Capture when the modal is opening.

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


Capture when the modal is open.

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


Capture when the modal is closing.

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


Capture when the modal is closed.

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


Capture when the modal enables or disables the full screen.

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


Capture when a modal opens and closes within a group.

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

Made with by Marcelo Dolza.

Did you like it? Help to keep iziModal development alive.