jQueryIZIMODAL v1.3.2

NPM › install

                        npm install izimodal --save
                    

Bower › install

                        bower install izimodal
                    

GEM › install

                        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. Recommended v1 or 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.

• icomoon
• fontawesome

HTML

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

                        Modal
                    

JS › Event to open Modal

If you want to open an iframe using the href link, be sure to use "this" in the open method.

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

JS › Initializing

iframeURL is optional

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

JS › Ajax opening

Example

                        
                    $("#modal").iziModal('open', 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
                    

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.

Modal › Title

Set a default Title.

Modal › Subtitle

Set a default Subtitle.

Modal › Icon

Set a default Icon class.

Modal › transitionIn/Out

Set a default transitionIn and transitionOut.

Modal › Attached

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

                    
Attach Top/Bottom
                    

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 icon of the modal.

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

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

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