Open navigation
Documentation See also iziToast.js

jQueryIZIMODAL v1.5.0

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

examples

Others examples
Star Download

A plugin for perky developers.

Changelog

All modern browsers are supported.

Bugs? create an issue here.

1.5.0 (Updated on May 13, 2017)

  • 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 - 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

1.4.2

  • 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

1.3.3

  • 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

1.3.2

  • new setGroup to set new group name - Implemented

  • bug group option work in some cases - Fixed

1.3.1

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

  • bug Widths with percentage does not work - Fixed

1.3.0

  • 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-id" - 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

1.2.0

  • new Retina display support - Implemented

  • bug Callbacks had no access to modal functions - Fixed

1.1.0

  • new feature to apply fullscreen - Implemented

  • new timeout feature with progress bar - Implemented

1.0.1

  • bug overlayClose only works the first time - Fixed



Start

CDNuse

https://cdnjs.com/libraries/izimodal

NPMinstall

                        npm install izimodal --save
                    

Bowerinstall

                        bower install izimodal
                    

GEMinstall

                        gem install izimodal
                    

HTML › Include the CSS files from the dist folder in the head section:

                        
                    

HTML › Include the JS file from the dist folder before the body

*jQuery is required (v1, v2 or v3). Recommended v2.

                        
                    

HTML › In body section

                        
                        Modal
                        
                        
                    

JS › Initializing

                    $("#modal").iziModal();
                    

JS › Event to open the modal

                            $(document).on('click', '.trigger', function (event) {
                                event.preventDefault();
                                $('#modal').iziModal('open');
                            });
                        

ICONS › Tested and recommended

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


Iframe

HTML

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

                        Modal
                        
                        
                    

JS › Event to open Modal

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

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

JS › Initializing

iframeURL is optional

                    $("#modal-iframe").iziModal({
                        iframe: true,
                        iframeHeight: 800,
                        iframeURL: "http://izimodal.dolce.ninja"
                    });
                    

Ajax

JS › Ajax opening

Example

                        

                    //$("#modal").iziModal({

                        onOpening: function(modal){

                            modal.startLoading();

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

                                modal.stopLoading();
                            });
                        }

                    //});

                    

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.

Options

Default Options (48)

                        $("#modal").iziModal({
                            title: '',
                            subtitle: '',
                            headerColor: '#88A0B9',
                            theme: '',  // light
                            appendTo: '.body', // or false
                            icon: null,
                            iconText: null,
                            iconColor: '',
                            rtl: false,
                            width: 600,
                            top: null,
                            bottom: null,
                            padding: 0,
                            radius: 3,
                            zindex: 999,
                            iframe: false,
                            iframeHeight: 400,
                            iframeURL: null,
                            focusInput: true,
                            group: '',
                            loop: false,
                            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,
                            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 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.
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?
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.
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.
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.

Methods

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

setWidth

new Change the width of the modal.

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

setTop

new Change the margin-top of the modal.

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

setBottom

new Change the margin-bottom of the modal.

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

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', 'iconClass');
                    

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

setFullscreen

Enter the full screen mode.

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

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
                    

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

Made with by Marcelo Dolce.

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