Programmation

Créer une popup avec jQuery

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.

un exemple de pop-up jQuery avec effets

<script>
$(function() {
$( "#dialog" ).dialog({width:550,height:280,
show:"blind",hide:"explode",position:[100,700]});
});
</script>

Sommaire

  • Ajouter jQuery à la page
  • Création de la pop up
  • Le code HTML
  • Les options
  • Ouvrir avec un lien

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.

Etape n°1 : ajouter jQuery.js, jQuery-ui.js et les jQuery-ui.css

Dans un premier temps, il faut ajouter la feuille de styles css des widgets jQuery UI à la page.
Pour cela, place le code ci-dessous dans le code HTML.

1
<link rel="stylesheet" href="https://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css"/>

Il faut également que jQuery et jQuery UI soit chargés, en collant les codes suivant dans la page. 

1
2
<script src="https://code.jquery.com/jquery-1.8.3.js"></script>
<script src="https://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>

Etape n°2 : création de la pop-up

Le script a utilisé est très court, il tient en une seule ligne.
Il utilise la méthode dialog().
Cette méthode possède de nombreuses options. Vous en trouverez 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.

1
2
3
4
5
<script>
$(function() {
$( "#dialog" ).dialog();
});
</script>

Etape n°3 : 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” 

1
2
3
<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>

On peut mettre n’importe quel code HTML à la place du texte, par exemple un formulaire d’inscription à la news letter.

Etapne n°4 : ajouter des options

Voici quelques options de la fonction dialog() :

La syntaxe des options est la suivante :

$( “identifiant” ).dialog({option1:”valeur1”,option2:”valeur2”});

Option de la popup Effet
autoOpen : false déactive l’ouverture automatique au chargement
show : “blind” l’affichage se fait avec l’effet blind
hide : “explode” la fermeture se fait avec l’effet explode
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.
position : [x,y] Positionne le pop-up à x du bord gauche et à y du haut

un autre exemple de pop-upjQuery avec effets
Pour le voir, il faudra actualiser la page, c’est le plus grand.

1
2
3
4
5
6
<script>
$(function() {
$( "#dialog" ).dialog({width:550,height:280,
show:"blind",hide:"explode",position:[100,700]});
});
</script>

Etape n°5 : ouvrir une popup avec un lien

Pour ouvrir le pop-up via un bouton ou un lien, voici une solution.

  • Le code JavaScript :
1
2
3
4
5
6
<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 :
1
2
3
<div id="dialog2" title="Pop-Up">
Que pensez-vous de ce pop up ?
</div>
  • Le lien d’ouverture :
1
<a href="javascript:popup();">Ouvrir popup</a>
Que pensez-vous de cette pop up ?

Cliquer pour : Ouvrir la popup

On peut modifier son style ou ajouter des boutons de validation ou de fermeture.
Mais il faut en laisser pour les autres jours.

A bientôt sur outils-web

Partager