Elegant, responsive, flexible and lightweight modal plugin with jQuery.
Fast | Responsive | Animated | Lightweight | Customizable | History | Group Mode | Retina |
---|---|---|---|---|---|---|---|
-
v1.3.2
-
v1.3.1
-
v1.3.0
History support - Implemented.
Group support (data-iziModal-group) with caption and navigation - Implemented.
Methods next and prev to be used on group mode - Implemented.
Option Loop and data (data-iziModal-loop) - Implemented.
Option pauseOnHover when you have timeout - Implemented.
Other Transitions and improvements in CSS - Implemented.
Methods setTransitionIn and setTransitionOut - Implemented.
data-iziModal-transitionIn and data-iziModal-transitionOut to triggers and modals - Implemented.
radius Option, zindex Option and method setZindex - Implemented.
Open and Close methods they can be used with different animations - Implemented.
data-iziModal-open="modal-id" - Implemented.
data-iziModal-title, data-iziModal-subtitle and data-iziModal-icon - Implemented.
Callbacks onResize and onFullscreen - Implemented.
Event fullscreen and Global Event iziModal-group-change - Implemented.
autoOpen option with delay - Implemented.
attached option, top or bottom - Implemented.
return of the methods were always overwritten - Fixed.
Overflow in fullscreen and other minor fixes in js structure - Fixed.
-
v1.2.0
-
v1.1.0
-
v1.0.1
npm install izimodal --save
bower install izimodal
gem install izimodal
- 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>
$("#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. |
- 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');
- 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.
});