Home > Web Front-end > JS Tutorial > Implementing a cool pop-up dialog with animated effects based on jQuery (with source code download)_jquery

Implementing a cool pop-up dialog with animated effects based on jQuery (with source code download)_jquery

WBOY
Release: 2016-05-16 15:14:13
Original
1608 people have browsed it

This is a pop-up dialog plug-in based on jQuery. The biggest feature of this jQuery dialog plug-in is that both pop-up and closing have very cool animation effects, such as rotating and flying in, up and down jittering and flying in, etc. The rendering is as follows:


Effect demonstration  Source code download

html code:

<div class="container">
<h1>jQuery gDialog Plugin Exampels</h1>
<button class="btn demo-1">Alert Dialog Box</button>
<button class="btn demo-2">Prompt Dialog Box</button>
<button class="btn demo-3">Prompt Dialog Box</button>
</div>
<script src="src/jquery.js"></script>
<script src="src/jquery.gDialog.js"></script>
<script>
$('.demo-1').click(function(){
$.gDialog.alert("Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse libero erat, scelerisque sit amet dolor nec, euismod feugiat massa.", {
title: "Alert Dialog Box",
animateIn: "bounceIn",
animateOut: "bounceOut"
});
}); 
$('.demo-2').click(function(){
$.gDialog.prompt("脚本之家", <a href="http://www.jb51.net">www.jb51.net</a>, {
title: "Prompt Dialog Box",
required: true,
animateIn : "rollIn",
animateOut: "rollOut"
});
}); 
$('.demo-3').click(function(){
$.gDialog.confirm("Are You Sure&#63;", {
title: "Confirm Dialog Box",
animateIn : "bounceInDown",
animateOut: "bounceOutUp"
});
}); 
</script>
Copy after login

The above is the cool pop-up dialog box with animation effect based on jQuery introduced by the editor (source code download included). I hope it will be helpful to everyone!

source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template