logo

zConfirm: Elegant Modal JavaScript confirm()

(make your JavaScript confirmation more beautiful)

Try it NOW!

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

Requirements

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

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.

out string bounceOutDown

Animation to hide and remove confirmation box. Special value: random, pick one of possible values below randomly every hide.

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.

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:

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.