Créer un popup déplaçable sous WordPress avec jQuery UI en une ligne.

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.

• Installer les css jQuery

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>

• Création du pop-up avec jQuery UI

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

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.

• Quelques options de dialog()

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

<script>
$(function() {
$( "#dialog" ).dialog({width:600,height:220,
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:600,height:220,
show:"blind",hide:"explode",position:[100,700]});
});
</script>

• Ouvrir un popup à partir d'un lien

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 :

<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