Heim > Web-Frontend > js-Tutorial > Implementierung eines coolen Popup-Dialogs mit animierten Effekten basierend auf jQuery (mit Quellcode-Download)_jquery

Implementierung eines coolen Popup-Dialogs mit animierten Effekten basierend auf jQuery (mit Quellcode-Download)_jquery

WBOY
Freigeben: 2016-05-16 15:14:13
Original
1609 Leute haben es durchsucht

Dies ist ein Pop-up-Dialog-Plug-in, das auf jQuery basiert. Das größte Merkmal dieses jQuery-Dialog-Plug-ins ist, dass sowohl Pop-up als auch Schließen sehr coole Animationseffekte haben, wie z. B. Drehen und Einfliegen Down-Jitter und Einfliegen usw. Das Rendering ist wie folgt:


Effektdemonstration  Quellcode-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>
Nach dem Login kopieren

Das Obige ist ein cooler Popup-Dialog mit animierten Effekten, der auf jQuery basiert und vom Editor eingeführt wurde (Quellcode-Download inbegriffen).

Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage