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
Libérer: 2016-05-16 15:14:13
original
1611 Les gens l'ont consulté

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>
Copier après la connexion

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 !

source:php.cn
Déclaration de ce site Web
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
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal