JQUERY-CONFIRM

Animations - Use one, or define your own.

back to Main Docs

Open/Close Animations

Impression lies in what we see.
Different animations can be set for open and close events.

animateFromElement is added since v3.3.0, which animates the modal from the position of the button that was clicked.
This feature does not play well with all the animation styles.

Recommended animations for animateFromElement:

2D animations: (animateFromElement disabled)

3D animations: (animateFromElement disabled)

You can also create/define your own animations

$.confirm({
    animation: 'zoom',
    closeAnimation: 'scale'
});
// Available animations:
// right, left, bottom, top, rotate, none, opacity, scale, zoom,
// scaleY, scaleX, rotateY, rotateYR (reverse), rotateX, rotateXR (reverse)

Animation bounce

Some eye candy thats in fashion.

$.confirm({
    animationBounce: 1.5, // default is 1.2 whereas 1 is no bounce.
});

Animation speed

Adjust the duration of animation.

$.confirm({
    animationSpeed: 2000 // 2 seconds
});
$.confirm({
    animationSpeed: 200 // 0.2 seconds
});

Define your custom animations

Defining your custom animations lets you match your existing user interface.

Example for a newsflash animation.
These animations are define the starting point of the openAnimation and ending point of the closeAnimation

.jconfirm .jconfirm-box.jconfirm-animation-news{
    // the animation name is bob
    transform: rotate(400deg) scale(0);
}
$.confirm({
    animation: 'news',
    closeAnimation: 'news',
});

The animation name should be lowercase, or they wont work.

  • .jconfirm-animation-animation-name translates to 'animation-name'
  • .jconfirm-animation-animationhere translates to 'animationhere'

Background dismiss animation

This animation takes place when backgroundDismiss is false, or returns a falsy value.

Example for a newsflash animation.
These animations are define the starting point of the openAnimation and ending point of the closeAnimation

.jconfirm .jconfirm-box.hilight.jconfirm-hilight-random {
    /*the animation name is bob*/
    transform: translate3d(0,0,0);
    animation: random 2s;
}
@keyframes random{
    10%, 90% {
        transform: rotate(-2deg);
    }
    20%, 80% {
        transform: rotate(4deg);
    }
    30%, 50%, 70% {
        transform: rotate(-8deg);
    }
    40%, 60% {
        transform: rotate(8deg);
    }
}
$.confirm({
    backgroundDismissAnimation: 'random',
});

The animation name should be lowercase, or they wont work.