zConfirm: Readme & Help

zConfirm: Elegant Modal JavaScript confirm()

(make your JavaScript confirmation more beautiful)

Try it NOW!

Nicer confirm() Method

Responsive Mobile-friendly Interface

Stunning Animations

Super Easy to Use

5 Built-in Styles

More options to style

please consider to support us buy zConfirm's commercial licenses
if you want to use on commercial sites

Requirements

jQuery v1.11.2+

zConfirm is designed to work on jQuery v1.11.2. But you can run with higher jQuery versions.

Bootstrap v3.3.4+

Bootstrap Modal v2.2.5+

FontAwesome

Animate.css

Install zConfirm

Because zConfirm is a jQuery script, and designed to include necessary resources automatically; so it's super easy to setup zConfirm:

CAUTION must keep id="PSZ_Library_Loader", keep the structure of zConfirm and name of file zConfirm.min.js.

Examples

Simplest

Confirmation with Message

Buttons

Animations

Random Animations

Built-in styles

Extra: Make confirmation box rounded

Extra: Apply flat design, no shadow

Extra: Custom icon & classes

Callback after zConfirm closed

Options

Name	type	default	description
style	string	empty	Style of confirmation box. Possible values: `ask, error, success, info, warning`
title	string	empty	Title of confirmation box. Be able to use HTML but take care the layout.
message	string	empty	Message of confirmation box. Be able to use HTML but take care the layout.
animation	Object		Declare the animations of confirmation box for events: showing, hiding and focusing. Use animated classes from animate.css.
in	string	bounceIn	Animation to show confirmation box. Special value: `random`, pick one of possible values below randomly every open. bounceIn, bounceInDown, bounceInLeft, bounceInRight, bounceInUp, fadeIn, fadeInDown, fadeInDownBig, fadeInLeft, fadeInLeftBig, fadeInRight, fadeInRightBig, fadeInUp, fadeInUpBig, flipInX, flipInY, lightSpeedIn, rotateIn, rotateInDownLeft, rotateInDownRight, rotateInUpLeft, rotateInUpRight, rollIn, zoomIn, zoomInDown, zoomInLeft, zoomInRight, zoomInUp, slideInDown, slideInLeft, slideInRight, slideInUp
out	string	bounceOutDown	Animation to hide and remove confirmation box. Special value: `random`, pick one of possible values below randomly every hide. bounceOut, bounceOutDown, bounceOutUp, bounceOutLeft, bounceOutRight, fadeOut, fadeOutDown, fadeOutDownBig, fadeOutLeft, fadeOutLeftBig, fadeOutRight, fadeOutRightBig, fadeOutUp, fadeOutUpBig, flipOutX, flipOutY, hinge, lightSpeedOut, rotateOut, rotateOutDownLeft, rotateOutDownRight, rotateOutUpLeft, rotateOutUpRight, slideOutLeft, slideOutRight, slideOutUp, rollOut
focus	string	shake	Animation to focus on confirmation box when users click out side of box. Special value: `random`, pick one of possible values below randomly. bounce, flash, pulse, rubberBand, shake, swing, tada, wobble, jello, flip
ok	Object		Declare the 'Ok' button.
label	string	Ok	Label of 'Ok' button.
click	function	function(){}	Tasks need to be processed when users click 'Ok' button.
cancel	Object		Declare the 'Cancel' button.
label	string	Cancel	Label of 'Cancel' button.
click	function	function(){}	Tasks need to be processed when users click 'Cancel' button.
extra	Object		Declare the extra configurations.
round	boolean	false	If you want to make confirmation box rounded, set this option to `true`.
flat	boolean	false	If you want to apply flat design without shadow to confirmation box, set this option to `true`.
icon	string	empty	Set custom icon for confirmation box from FontAwesome.
iconClass	string	empty	Set more additional classes for custom icon. There are many built-in classes in `zConfirm/library/css/zConfirm.min.css` to change background color of icon. Possible values: bg-black, bg-white, bg-lime, bg-green, bg-emerald, bg-teal, bg-cyan, bg-cobalt, bg-indigo, bg-violet, bg-pink, bg-magenta, bg-crimson, bg-red, bg-orange, bg-amber, bg-yellow, bg-brown, bg-olive, bg-steel, bg-mauve, bg-taupe, bg-gray, bg-dark, bg-darker, bg-transparent, bg-darkBrown, bg-darkCrimson, bg-darkMagenta, bg-darkIndigo, bg-darkCyan, bg-darkCobalt, bg-darkTeal, bg-darkEmerald, bg-darkGreen, bg-darkOrange, bg-darkRed, bg-darkPink, bg-darkViolet, bg-darkBlue, bg-lightBlue, bg-lightRed, bg-lightGreen, bg-lighterBlue, bg-lightTeal, bg-lightOlive, bg-lightOrange, bg-lightPink, bg-grayDark, bg-grayDarker, bg-grayLight, bg-grayLighter, bg-blue
titleClass	string	empty	Set more additional classes for title of confirmation. There are many built-in classes in `zConfirm/library/css/zConfirm.min.css` to change background color of title.
callback	function	function(){}	More tasks need to be processed after confirmation box closed.