| Server IP : 46.62.235.243 / Your IP : 216.73.216.217 Web Server : Apache/2.4.58 (Ubuntu) System : Linux Linkabili3Dicembre 6.8.0-100-generic #100-Ubuntu SMP PREEMPT_DYNAMIC Tue Jan 13 16:40:06 UTC 2026 x86_64 User : www-data ( 33) PHP Version : 8.1.33 Disable Function : NONE MySQL : OFF | cURL : ON | WGET : ON | Perl : ON | Python : OFF | Sudo : ON | Pkexec : OFF Directory : /var/www/linkabili/node_modules/jquery-confirm/ |
Upload File : |
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<!-- <meta http-equiv="X-UA-Compatible" content="chrome=1"> -->
<title>jquery-confirm.js | Animations</title>
<meta name="viewport"
content="width=device-width, initial-scale=1, user-scalable=no">
<!--[if lt IE 9]>
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<meta name="description"
content="A multipurpose alert, confirm plugin, alternative to the native alert() and confirm() functions. Supports features like auto-close, themes, animations, and more.">
<link rel="canonical"
href="https://craftpip.github.io/jquery-confirm"/>
<link rel="icon"
type="img/png"
href="http://craftpip.com/i/assets/img/fav.png">
<meta http-equiv="Content-Type"
content="text/html; charset=UTF-8"/>
<meta name="robots"
content="index,follow,noodp,noydir"/>
<meta name="google-site-verification"
content="T_M_Ym5DQ-cEQQhx_jswyCBTssIdgtewICcvb3sgh8g"/>
<meta name="Keywords"
content="jquery.confirm, jquery confirm, jquery alert, jquery prompt, jquery dialog, javascript, bootstrap"/>
<link rel="apple-touch-icon"
sizes="57x57"
href="http://craftpip.com/i/apple-touch-icon-57x57.png"/>
<link rel="apple-touch-icon"
sizes="72x72"
href="http://craftpip.com/i/apple-touch-icon-72x72.png"/>
<link rel="apple-touch-icon"
sizes="114x114"
href="http://craftpip.com/i/apple-touch-icon-114x114.png"/>
<link rel="apple-touch-icon"
sizes="144x144"
href="http://craftpip.com/i/apple-touch-icon-144x144.png"/>
<link rel="apple-touch-icon"
href="http://craftpip.com/i/apple-touch-icon-57x57.png"/>
<meta property="og:title"
content="jquery-confirm.js | The multipurpose alert & confirm"/>
<meta property="og:type"
content="website"/>
<meta property="og:image"
content="http://craftpip.com/i/apple-touch-icon-57x57.png"/>
<meta property="og:url"
content="https://craftpip.github.io/jquery-confirm"/>
<meta property="og:description"
content="A multipurpose alert & confirm plugin, alternative to the native alert() and confirm() functions. Supports features like auto-close, themes, animations, and more."/>
<meta property="og:site_name"
content="craftpip.github.io"/>
<link rel="stylesheet"
href="demo/libs/bundled.css">
<script src="demo/libs/bundled.js"></script>
<script async
src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<link rel="stylesheet"
href="demo/demo.css">
<script>
var version = '3.3.4';
</script>
<!-- Add the minified version of files from the /dist/ folder. -->
<!-- jquery-confirm files -->
<link rel="stylesheet"
type="text/css"
href="css/jquery-confirm.css"/>
<script type="text/javascript"
src="js/jquery-confirm.js"></script>
<!--END jquery-confirm files-->
</head>
<body data-spy="scroll"
data-target=".navbar">
<header class="navbar navbar-static-top navbar-default navheader">
<div class="container">
<div class="navbar-header">
<button class="navbar-toggle collapsed"
type="button"
data-toggle="collapse"
data-target="#bs-navbar"
aria-controls="bs-navbar"
aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand jconfirm-logo"
href="http://craftpip.github.io/jquery-confirm">
</a>
</div>
<nav id="bs-navbar"
class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="">
<a href="http://github.com/craftpip/jquery-confirm"><i class="fa fa-github"></i> Project home</a>
</li>
<li class="">
<a href="http://github.com/craftpip/jquery-confirm/issues/new">Suggest feature</a>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li class="dropdown">
<a href="#"
class="dropdown-toggle"
data-toggle="dropdown"
role="button"
aria-haspopup="true"
aria-expanded="false">Versions
<span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li>
<a href="http://craftpip.github.io/jquery-confirm/v3.3.2">v3.3.2</a>
</li>
<li>
<a href="http://craftpip.github.io/jquery-confirm/v3.3.1">v3.3.1</a>
</li>
<li>
<a href="http://craftpip.github.io/jquery-confirm/v3.3.0">v3.3.0</a>
</li>
<li>
<a href="http://craftpip.github.io/jquery-confirm/v3.2.3">v3.2.3</a>
</li>
<li>
<a href="http://craftpip.github.io/jquery-confirm/v3.2.0">v3.2.0</a>
</li>
<li>
<a href="http://craftpip.github.io/jquery-confirm/v3.1.1">v3.1.1</a>
</li>
<li>
<a href="http://craftpip.github.io/jquery-confirm/v3.0.3">v3.0.3</a>
</li>
<li>
<a href="http://craftpip.github.io/jquery-confirm/v3.0.1">v3.0.1</a>
</li>
<li>
<a href="http://craftpip.github.io/jquery-confirm/v3.0.0">v3.0.0</a>
</li>
<li>
<a href="http://craftpip.github.io/jquery-confirm/v2.5.1">v2.5.1</a>
</li>
<li>
<a href="http://craftpip.github.io/jquery-confirm/v2.0">v2.0</a>
</li>
<li>
<a href="http://craftpip.github.io/jquery-confirm/v1.8">v1.8</a>
</li>
<li>
<a href="http://craftpip.github.io/jquery-confirm/v1.7.9">v1.7.9</a>
</li>
<li>
<a href="http://craftpip.github.io/jquery-confirm/v1.7.8">v1.7.8</a>
</li>
<li>
<a href="http://craftpip.github.io/jquery-confirm/v1.7.5">v1.7.5</a>
</li>
<li>
<a href="http://craftpip.github.io/jquery-confirm/v1.7.3">v1.7.3</a>
</li>
<li>
<a href="http://craftpip.github.io/jquery-confirm/v1.7">v1.7</a>
</li>
<li>
<a href="http://craftpip.github.io/jquery-confirm/v1.6">v1.6</a>
</li>
<li>
<a href="http://craftpip.github.io/jquery-confirm/v1.5.3">v1.5.3</a>
</li>
<li>
<a href="http://craftpip.github.io/jquery-confirm/v1.5.1">v1.5.1</a>
</li>
<li>
<a href="http://craftpip.github.io/jquery-confirm/v1.5">v1.5</a>
</li>
<li>
<a href="http://craftpip.github.io/jquery-confirm/v1.1.3">v1.1.3</a>
</li>
<li>
<a href="http://craftpip.github.io/jquery-confirm/v1.1">v1.1</a>
</li>
<li>
<a href="http://craftpip.github.io/jquery-confirm/v1.0">v1.0</a>
</li>
</ul>
</li>
<li>
<a class="github-button"
href="https://github.com/craftpip/jquery-confirm"
data-style="mega"
data-count-href="/craftpip/jquery-confirm/stargazers"
data-count-api="/repos/craftpip/jquery-confirm#stargazers_count"
data-count-aria-label="# stargazers on GitHub"
aria-label="Star craftpip/jquery-confirm on GitHub">Star
</a>
</li>
<li>
<a class="twitter-follow-button"
data-show-count="false"
data-size="large"
href="https://twitter.com/craftpip"
data-show-count="false"
data-lang="en">
Follow @craftpip
</a>
</li>
</ul>
</nav>
</div>
</header>
<div class="header"
id="content"
tabindex="-1">
<div class="container">
<div class="row">
<div class="col-md-12">
<h1 style="margin-top: 7px;"
class="text-center">
<img
src="jquery-confirm.png"
alt="JQUERY-CONFIRM"/>
</h1>
<p>
Animations - <em>Use one, or define your own</em>.
</p>
<div class="row download-btns hide">
<div class="col-md-4 col-md-offset-4">
<div style="height: 15px;"></div>
<a href="https://github.com/craftpip/jquery-confirm/zipball/master"
class="btn btn-lg">Download v3
</a>
<a href="https://github.com/craftpip/jquery-confirm"
class="btn btn-lg"><i class="fa fa-github"></i> View on GitHub
</a>
<div style="height: 15px;"></div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-md-3 col-sm-12">
<div class="space10"></div>
<div class="space10"></div>
<p>
<strong>jquery-confirm
v
<span class="version">-</span>
docs
</strong>
<br>
<a href="https://github.com/craftpip/jquery-confirm">
view on <i class="fa fa-github"></i> Github
</a>
</p>
<div class="spacer15"></div>
<div id="my-nav">
<ul class="nav nav-list">
<li class="no-b-l">
<a href="index.html"> <span class="v"><i class="fa fa-arrow-circle-left"></i></span> back to
Main Docs</a>
</li>
<li>
<a href="#open-close-animations"> Open/Close Animations</a>
<ul class="nav nav-list">
<li>
<a href="#open-close-animations"> Animations</a>
</li>
<li>
<a href="#animationbounce"> Bounce Effect</a>
</li>
<li>
<a href="#animationspeed"> Animation Speed</a>
</li>
</ul>
</li>
<li>
<a href="#custom-open-close-animations"> Define Open/Close Animation</a>
</li>
<li>
<a href="#background-dismiss-animation"> Background Dismiss Animations</a>
</li>
</ul>
</div>
</div>
<div class="col-md-9 col-sm-12">
<div class="space10"></div>
<p>
<a href="index.html"> <span class="v"><i class="fa fa-arrow-circle-left"></i></span> back to
Main Docs</a>
</p>
<!-- introduction -->
<section id="open-close-animations">
<h2>Open/Close Animations</h2>
<p>
Impression lies in what we see.<br>
Different animations can be set for open and close events.
</p>
<div class="alert alert-info">
animateFromElement is added since v3.3.0, which animates the modal from the position of the button that was clicked.
<br> This feature does not play well with all the animation styles.
</div>
<!--<h3 id="animation">ANIMATION!</h3>-->
<div class="section">
<p>Recommended animations for animateFromElement:</p>
<button class="example16-a-1 btn btn-primary">scale</button>
<script type="text/javascript">
$('.example16-a-1').on('click', function () {
$.confirm({
animation: 'scale',
closeAnimation: 'scale',
});
});
</script>
<button class="example17-a-2 btn btn-primary">rotateY</button>
<script type="text/javascript">
$('.example17-a-2').on('click', function () {
$.confirm({
animation: 'rotateY',
closeAnimation: 'rotateY',
});
});
</script>
<button class="example18-a-3 btn btn-primary">rotateYR</button>
<script type="text/javascript">
$('.example18-a-3').on('click', function () {
$.confirm({
animation: 'rotateYR',
closeAnimation: 'rotateYR'
});
});
</script>
<button class="example19-a-4 btn btn-primary">rotateX</button>
<script type="text/javascript">
$('.example19-a-4').on('click', function () {
$.confirm({
animation: 'rotateX',
closeAnimation: 'rotateX'
});
});
</script>
<button class="example19-a-5 btn btn-primary">rotateXR</button>
<script type="text/javascript">
$('.example19-a-5').on('click', function () {
$.confirm({
animation: 'rotateXR',
closeAnimation: 'rotateXR'
});
});
</script>
<div class="space10"></div>
<p>2D animations: (animateFromElement disabled)</p>
<button class="example16 btn btn-primary">right</button>
<script type="text/javascript">
$('.example16').on('click', function () {
$.confirm({
animation: 'right',
closeAnimation: 'right',
animateFromElement: false,
});
});
</script>
<button class="example17 btn btn-primary">left</button>
<script type="text/javascript">
$('.example17').on('click', function () {
$.confirm({
animation: 'left',
closeAnimation: 'left',
animateFromElement: false,
});
});
</script>
<button class="example18 btn btn-primary">bottom</button>
<script type="text/javascript">
$('.example18').on('click', function () {
$.confirm({
animation: 'bottom',
closeAnimation: 'bottom',
animateFromElement: false,
});
});
</script>
<button class="example19 btn btn-primary">top</button>
<script type="text/javascript">
$('.example19').on('click', function () {
$.confirm({
animation: 'top',
closeAnimation: 'top',
animateFromElement: false,
});
});
</script>
<button class="example11 btn btn-primary">Rotate</button>
<script type="text/javascript">
$('.example11').on('click', function () {
$.confirm({
animation: 'Rotate',
closeAnimation: 'Rotate',
animateFromElement: false,
});
});
</script>
<button class="example12 btn btn-primary">none</button>
<script type="text/javascript">
$('.example12').on('click', function () {
$.confirm({
animation: 'none',
animateFromElement: false,
});
});
</script>
<button class="example13 btn btn-primary">opacity</button>
<script type="text/javascript">
$('.example13').on('click', function () {
$.confirm({
animation: 'opacity',
closeAnimation: 'opacity',
animateFromElement: false,
});
});
</script>
<div class="space10"></div>
<p>3D animations: (animateFromElement disabled)</p>
<button class="example15 btn btn-primary">scale (default)</button>
<script type="text/javascript">
$('.example15').on('click', function () {
$.confirm({
animation: 'scale',
closeAnimation: 'scale',
animateFromElement: false,
});
});
</script>
<button class="example14 btn btn-primary">zoom</button>
<script type="text/javascript">
$('.example14').on('click', function () {
$.confirm({
animation: 'zoom',
closeAnimation: 'zoom',
animateFromElement: false,
});
});
</script>
<button class="example7 btn btn-primary">scaleY</button>
<script type="text/javascript">
$('.example7').on('click', function () {
$.confirm({
animation: 'scaleY',
closeAnimation: 'scaleY',
animateFromElement: false,
})
});
</script>
<button class="example8 btn btn-primary">scaleX</button>
<script type="text/javascript">
$('.example8').on('click', function () {
$.confirm({
animation: 'scaleX',
closeAnimation: 'scaleX',
animateFromElement: false,
})
});
</script>
<button class="example9 btn btn-primary">RotateY</button>
<script type="text/javascript">
$('.example9').on('click', function () {
$.confirm({
animation: 'rotateY',
closeAnimation: 'rotateY',
animateFromElement: false,
});
});
</script>
<button class="example9-2 btn btn-primary">RotateYR</button>
<script type="text/javascript">
$('.example9-2').on('click', function () {
$.confirm({
animation: 'rotateYR',
closeAnimation: 'rotateYR',
animateFromElement: false,
});
});
</script>
<button class="example10 btn btn-primary">RotateX</button>
<script type="text/javascript">
$('.example10').on('click', function () {
$.confirm({
animation: 'rotateX',
closeAnimation: 'rotateX',
animateFromElement: false,
});
});
</script>
<button class="example10-2 btn btn-primary">RotateXR</button>
<script type="text/javascript">
$('.example10-2').on('click', function () {
$.confirm({
animation: 'rotateXR',
closeAnimation: 'rotateXR',
animateFromElement: false,
});
});
</script>
<div class="space10"></div>
<p>
You can also <a href="#custom-open-close-animations">create/define your own animations</a>
</p>
<pre class="prettyprint linenums"><code>$.confirm({
animation: 'zoom',
closeAnimation: 'scale'
});
// Available animations:
// right, left, bottom, top, rotate, none, opacity, scale, zoom,
// scaleY, scaleX, rotateY, rotateYR (reverse), rotateX, rotateXR (reverse)</code></pre>
</div>
<h4 id="animationbounce">Animation bounce</h4>
<div class="section">
<p>Some eye candy thats in fashion.</p>
<button class="btn btn-primary example-bounce-1">No bounce</button>
<button class="btn btn-primary example-bounce-2">1.5 bounce</button>
<button class="btn btn-primary example-bounce-3">2 bounce</button>
<button class="btn btn-primary example-bounce-4">2.5 bounce</button>
<script type="text/javascript">
$('.example-bounce-1').on('click', function () {
$.confirm({
animationBounce: 1
});
});
$('.example-bounce-2').on('click', function () {
$.confirm({
animationBounce: 1.5
});
});
$('.example-bounce-3').on('click', function () {
$.confirm({
animationBounce: 2
});
});
$('.example-bounce-4').on('click', function () {
$.confirm({
animationBounce: 2.5
});
});
</script>
<div class="space10"></div>
<pre class="prettyprint linenums"><code class="html">$.confirm({
animationBounce: 1.5, // default is 1.2 whereas 1 is no bounce.
});</code></pre>
</div>
<h4 id="animationspeed">Animation speed</h4>
<div class="section">
<p>Adjust the duration of animation.</p>
<button class="btn btn-primary example19-1">I'm too Late</button>
<button class="btn btn-primary example19-2">I'm too Quick</button>
<div class="space10"></div>
<script type="text/javascript">
$('.example19-1').on('click', function () {
$.confirm({
animationSpeed: 2000
});
});
$('.example19-2').on('click', function () {
$.confirm({
animationSpeed: 200
});
});
</script>
<pre class="prettyprint linenums"><code>$.confirm({
animationSpeed: 2000 // 2 seconds
});
$.confirm({
animationSpeed: 200 // 0.2 seconds
});</code></pre>
</div>
</section>
<section id="custom-open-close-animations">
<h2>Define your custom animations</h2>
<p>
Defining your custom animations lets you match your existing user interface.
</p>
<div class="section">
<p>Example for a newsflash animation. <br>These animations are define the starting point of the
openAnimation and ending point of the closeAnimation</p>
<button class="btn btn-primary custom-anim-1">Custom animation</button>
</div>
<style>
.jconfirm .jconfirm-box.jconfirm-animation-news {
/*the animation name is bob*/
transform: rotate(400deg) scale(0);
}
</style>
<script>
$('.custom-anim-1').on('click', function () {
$.confirm({
animation: 'news',
closeAnimation: 'news',
});
});
</script>
<div class="space10"></div>
<div class="row">
<div class="col-md-7">
<pre class="prettyprint linenums"><code>.jconfirm .jconfirm-box.jconfirm-animation-news{
// the animation name is bob
transform: rotate(400deg) scale(0);
}</code></pre>
</div>
<div class="col-md-5">
<pre class="prettyprint linenums"><code>$.confirm({
animation: 'news',
closeAnimation: 'news',
});</code></pre>
</div>
</div>
<p>
The animation name should be lowercase, or they wont work.
</p>
<ul>
<li>
<code>.jconfirm-animation-animation-name</code> translates to 'animation-name'
</li>
<li>
<code>.jconfirm-animation-animationhere</code> translates to 'animationhere'
</li>
</ul>
</section>
<section id="background-dismiss-animation">
<h2>Background dismiss animation</h2>
<p>
This animation takes place when backgroundDismiss is false, or returns a falsy value.
</p>
<div class="section">
<p>Example for a newsflash animation. <br>These animations are define the starting point of the
openAnimation and ending point of the closeAnimation</p>
<button class="btn btn-primary custom-bg-1">Custom animation</button>
</div>
<style>
.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);
}
}
</style>
<script>
$('.custom-bg-1').on('click', function () {
$.confirm({
backgroundDismissAnimation: 'random'
});
});
</script>
<div class="space10"></div>
<div class="row">
<div class="col-md-7">
<pre class="prettyprint linenums"><code>.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);
}
}</code></pre>
</div>
<div class="col-md-5">
<pre class="prettyprint linenums"><code>$.confirm({
backgroundDismissAnimation: 'random',
});</code></pre>
</div>
</div>
<p>
The animation name should be lowercase, or they wont work.
</p>
</section>
<section class="text-right footer">
<div class="spacer15"></div>
<p>
Thanks for making it to the end of the document. <br>
Your support and suggestions matter the most!
</p>
<a href="https://github.com/craftpip/jquery-confirm/issues/new"
target="empty"
class="btn btn-success">Please post your <br> Questions / Suggestions / Issues.
</a>
<div class="spacer15"></div>
</section>
</div>
</div>
</div>
<script type="text/javascript"
src="demo/demo.js"></script>
<!-- javascript for the demo page interface. -->
<!--google stuff DO NOT COPY THIS-->
<script>
(function (i, s, o, g, r, a, m) {
i['GoogleAnalyticsObject'] = r;
i[r] = i[r] || function () {
(i[r].q = i[r].q || []).push(arguments)
}, i[r].l = 1 * new Date();
a = s.createElement(o),
m = s.getElementsByTagName(o)[0];
a.async = 1;
a.src = g;
m.parentNode.insertBefore(a, m)
})(window, document, 'script', '//www.google-analytics.com/analytics.js', 'ga');
ga('create', 'UA-53264350-2', 'auto');
ga('send', 'pageview');
</script>
<script async
defer
id="github-bjs"
src="https://buttons.github.io/buttons.js"></script>
<script> window.twttr = (function (d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0], t = window.twttr || {};
if (d.getElementById(id))
return t;
js = d.createElement(s);
js.id = id;
js.src = "https://platform.twitter.com/widgets.js";
fjs.parentNode.insertBefore(js, fjs);
t._e = [];
t.ready = function (f) {
t._e.push(f);
};
return t;
}(document, "script", "twitter-wjs"));
</script>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
<!--google stuff DO NOT COPY THIS-->
</body>
</html>