Skip to content

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

License

Notifications You must be signed in to change notification settings

wushian/iziModal

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

42 Commits
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

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

izimodal.marcelodolce.com

capa

Fast Responsive Animated Lightweight Customizable History Group Mode Retina
alt text alt text alt text alt text alt text alt text alt text alt text

Version Log

  • v1.3.2

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

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

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

    • alt text Retina display support - Implemented.
    • alt text Callbacks had no access to modal functions - Fixed.
  • v1.1.0

    • alt text feature to apply fullscreen - Implemented.
    • alt text timeout feature with progress bar - Implemented.
  • v1.0.1

    • alt text overlayClose only works the first time - Fixed.

Install

npm install izimodal --save

bower

bower install izimodal
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 **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: '',
    iconColor: '',
    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.
iconColor '' Color of the header icon.
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 icon of the modal.
$('#modal').iziModal('setIcon', 'icon-home');
  • 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.
});

About

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

Resources

License

Stars

Watchers

Forks

Packages

No packages published

Languages

  • CSS 72.7%
  • JavaScript 27.3%