Maison >interface Web >js tutoriel >Implémentation d'une boîte de dialogue contextuelle sympa avec des effets animés basés sur jQuery (avec téléchargement du code source)_jquery

Implémentation d'une boîte de dialogue contextuelle sympa avec des effets animés basés sur jQuery (avec téléchargement du code source)_jquery

WBOY
WBOYoriginal
2016-05-16 15:14:131612parcourir

Il s'agit d'un plug-in de dialogue contextuel basé sur jQuery. La plus grande caractéristique de ce plug-in de dialogue jQuery est que les pop-up et la fermeture ont des effets d'animation très sympas, tels que la rotation et le vol vers l'intérieur, vers le haut et vers le haut. vers le bas, le tremblement et le vol, etc. Le rendu est le suivant :


Démonstration d'effet  Téléchargement du code source

Code HTML :

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

Ce ci-dessus est la boîte de dialogue contextuelle sympa avec effet d'animation basé sur jQuery introduite par l'éditeur (avec téléchargement du code source). J'espère qu'elle sera utile à tout le monde !

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn