jQueryIZIMODAL v1.6.1

CDN › use

NPM › install

                        npm install izimodal --save
                    

Bower › install

                        bower install izimodal
                    

GEM › install

                        gem install izimodal
                    

ICONS › Tested and recommended

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

• icomoon
• fontawesome

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

                        
                        
 
                            
                        

                        
                        Modal
                    

JS › Initializing

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

JS › Event to open the modal

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

Or you can also use.

HTML › Open the modal

                            Modal
                        

HTML › Open the modal

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

                            

                            Another Modal

                            
                        

HTML

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

                        Modal
                        
                        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.marcelodolza.com"
                    });
                    

JS › Ajax opening

Example

                        

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

                        onOpening: function(modal){

                            modal.startLoading();

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

                                modal.stopLoading();
                            });
                        }

                    //});

                    

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.

                    Open
                    
                    Open
                    

Trigger › Close

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

                    Close
                    
                    Close
                    

Trigger › Fullscreen

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

                    Maximize
                    

Trigger › Next

Closes the current and open the next modal.

                    Next Modal
                    

Trigger › Previous

Closes the current and open the previous modal.

                    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.

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

setContent

New Set a new content to modal.

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

                        // And you can keep this new content by default.

                        $("#modal").iziModal('setContent', {
                            content: '
Example
',
                            default: true
                        })
                    

resetContent

New Returns the default Modal content.

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

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

Internal Loading

startLoading

Start overlay loading within the modal.

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

stopLoading

Stop overlay loading within the modal.

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

Progress Control

startProgress

Start progress loading within the modal.

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

pauseProgress

Pause progress loading within the modal.

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

resumeProgress

Resume progress loading within the modal.

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

resetProgress

Reset progress loading within the modal.

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

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

setHeader

new Enable/disable Modal header.

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

setHeaderColor

Apply the background color in modal header.

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

setBackground

Apply the Modal background.

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

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
                    

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