Fenêtre modal avec jQueryUI
Ce soir, petit cours de Javascript, mieux, de jQuery.
Bon, jQuery, c’est de la balle. si vous ne connaissez pas c’est ici:
Ce soir donc, les fenêtres modal. Pour en afficher une, rien de plus simple :
<script type="text/javascript">
$(document).ready( function() { // Pour être sur que le DOM soit chargé
$('div#dialog').dialog(); // On ouvre dialog avec l'ID dialog dedans
return false;
});
</script>
facile hein ?
Je pars du principe que vous savez inclure le JS dans vos pages.
Maintenant, ça peut-être pratique de n’ouvrir cette fenêtre que sur une évènement, on va prendre le plus simple le « Click »
<script type="text/javascript">
$(document).ready( function() {
$('bouton').click({ // quand on click
$('div#dialog').dialog(); //sa ouvre
return false;
});
});
</script>
Là, lorsque l’on click sur le le bouton, une fenêtre s’affiche. avec les paramètres par défaut.
Je vous invite à consulter la doc sur le site de jQueryUI pour les options disponibles.
D’ailleurs, on va en utiliser une, d’option. « autoOpen ».
En fait, dans l’exemple en haut, ça fonctionne, mais qu’une seule fois !
Vous allez ouvrir la fenêtre, la fermer, puis pouf ! ça ne marche plus sans recharger la page. La solution, toute conne est :
<script type="text/javascript">
$(document).ready( function() {
$('bouton').dialog({ autoOpen: false }); //on crée la fenêtre, mais on ne l'ouvre pas
$('bouton').click({ // et Pouf !
$('div#dialog').dialog();
return false;
});
});
</script>
Et hop, vous pouvez maintenant vous amusez avec vos liens, vos boutons toussa … 
Bon 2 petites remarque :
- Pour le contenu, vous faites un
<div>normal que vous cachez en CSS avecdisplay: hidden; - 2 façons pour le titre de la fenêtre :
<div title="Titre de la fenêtre" > Contenu ...- dans les options lors de la création de la fenêtre ( après autoOpen par exemple)
Bien sur, si j’ai écris un truc faux, n’hésitez pas à me laisser une insulte en commentaire et (de préférence) l’erreur et sa correction.
(Enfin sinon, vous allez passez pour un vieux con qui râle sans savoir, mais c’est à vous de choisir …) 