Ceci est un petit texte montrant la facilité avec laquelle il est possible de créer des pop up avec jQuery UI et jQuery-ui.css.
Si vous ne les avez pas fermé, deux pop-up se sont ouvert dans la page. Dans ce petit tutoriel nous allons voir la facilité avec laquelle il est possible de créer ce genre de pop-up avec jQuery UI. Dans un premier temps, il faut installer la feuille de styles css des widgets jQuery UI . Pour cela, placez le code ci-dessous dans votre page en mode HTML (Texte)
<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css"/>
Il faut également que jQuery et jQuery UI soit chargés. Vous devez donc coller également ces codes en début de page en mode HTML (Texte). Ces codes sont également disponibles sur Google. Je vous invite à consulter cet article : comment installer jQuery sur WordPress, pour plus d'information.
<script src="http://code.jquery.com/jquery-1.8.3.js"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>

Le script est vraiment très court, il tient en une seule ligne. Il utilise la méthode dialog(). Cette méthode possède de nombreuses options.J'en proposerai quelques unes en fin d'article. Le premier $(... du script est équivalent à $(document).ready(... ce qui a pour effet d'exécuter la fonction lorsque la page est chargée. l'identifiant #dialog est à mettre en rapport avec l'identifiant dialog dans la balise <div> . Vous pourriez mettre Toto si ça vous amuse. Le tout est d'avoir la même chose dans les deux parties.
<script>
$(function() {
$( "#dialog" ).dialog();
});
</script>
Le code HTML est également très simple. Il se compose de deux balises <div> et </div> avec l'identifiant ici id="dialog" et le titre qui s'affichera dans le pop-up, noté dans title="pop-up"
<div id="dialog" title="Pop-Up"></div>
<p>Ceci est un petit texte montrant la facilité avec laquelle il est possible de créer un pop-up avec jQuery UI et jQuery-ui.css.</p>
</div>
Il est possible de mettre n'importe quel code HTML à la place du texte. Vous pouvez par exemple mettre un formulaire d'inscription d'un autorépondeur. Voici quelques options commentées. La liste est loin d'être complète. La syntaxe est la suivante : $( "identifiant" ).dialog({option1:"valeur1",option2:"valeur2"}); autoOpen : false désactive l'ouverture automatique au chargement si $(... show : "blind" l'affichage se fait avec l'effet blind hide : "explode" la fermeture se fait avec l'effet explode Il est possible d'ajouter des effets avec des durées... width : 400 la largeur sera de 400 pixels height : 300 la hauteur sera de 300 pixels modal : true empêche l'accès à la page en la grisant. Il faut fermer le pop-up pour aller sur la page. Cela peut être utile ou gênant... position : [x,y] Positionne le pop-up à x du bord gauche et à y du haut

un exemple de pop-up jQuery avec effets

<script>
$(function() {
$( "#dialog" ).dialog({width:550,height:280,
show:"blind",hide:"explode",position:[100,700]});
});
</script>
un autre exemple de pop-upjQuery avec effets Pour le voir, il faudra actualiser la page.
<script>
$(function() {
$( "#dialog" ).dialog({width:550,height:280,
show:"blind",hide:"explode",position:[100,700]});
});
</script>
Pour ouvrir le pop-up via un bouton ou un lien, voici une solution :
<script type="text/javascript">
function popup() {
$( "#dialog2" ).dialog({width:600,height:220,
show:"blind",hide:"explode",position:[100,100]});
};
</script>
Le code HTML reste le même :
Que pensez-vous de ce pop up ?
<div id="dialog2" title="Pop-Up">
Que pensez-vous de ce pop up ?
</div>
Pour finir, voici le lien permttant d'ouvrir le pop up :
<a href="javascript:popup();">Ouvrir popup</a>
Cliquer ici pour : >>Ouvrir le popup << On peut modifier son style ou ajouter des boutons de validation et de fermeture dans le pop-up. Mais il faut en laisser pour les autres jours. Si vous avez des questions, des remarques ou des compléments n'hésitez pas à mettre un commentaire, c'est dofollow :). A bientôt sur outils-web.fr