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
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?", { 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 !