Heim  >  Artikel  >  Web-Frontend  >  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
WBOYOriginal
2016-05-16 15:14:131522Durchsuche

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>

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

Stellungnahme:
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