JQuery : boite de dialogue MODAL - cas d'utilisation

Les boites de dialogue de type MODALE doivent être utilisées avec précaution car elles "bloquent" temporairement votre application.

Elles peuvent être pourtant d'une grande utilité.

Vous souhaitez par exemple afficher une boite de dialogue en Javascript qui propose une série d'outils "cliquables".

Cette boite de dialogue doit se fermer soit après le click d'un l'utilisateur (choix d'un outil) soit au bout de quelques secondes si aucune action de la part de l'utilisateur.

JQuery propose une "solution".

Nous partons du principe que cette API  a été téléchargée et intégrée à votre projet.

Voici un exemple de code Javascript :

function dialogue_outils() {
var dataHTML = "<img src='images/outil1.png' class='ma_classe' title='outil 1' " +
"onclick='traitement_outil1();' />&nbsp;&nbsp;" +
"<img src='images/outil2.png' class='ma_classe' title='outil 2' " + 
"onclick='traitement_outil2();' />&nbsp;&nbsp;" +
"<img src='images/outil3.png' class='ma_classe' title='outil 3' " +
"onclick='traitement_outil3();' />&nbsp;&nbsp;" +
"<img src='images/outil4.png' class='ma_classe' title='outil 4'" +
"onclick='traitement_outil4();' />";

var lib_etiq = "Menu Outils";

$(document).ready(function() {
var $dialog = $('<div></div>').html(dataHTML).dialog( {
autoOpen: true,
closeOnEscape: false, 
modal: true,
title: lib_etiq,
width: 'yyypx',
height: 'auto',
open: function(event, ui) {
// cacher bouton "fermer" 
$(this).parent().children().children(".ui-dialog-titlebar-close").hide(); 

// fermer la boite de dialogue si click
$(this).bind('click', function() {
$(this).dialog('close');
            })
}
});

// fermer la boite de dialogue après 5 secondes (si pas de click sur 1 bouton)
setTimeout(function(){ $dialog.dialog("close")}, 5000);
});
}

"yyy" représente la largeur en pixels de la boite de dialogue.

Vous noterez l'astuce pour "cacher" le bouton <close>.

Une technique très intéressante (et puissante) et le <binding> autrement dit la possibilité de "lier" les événements générés par l'utilisateur (exemple un click) à une fonctionnalité de JQuery (exemple fermer le dialogue).

Et pour finir, l'utilisation de la fonction Javascript setTimeout() très utile pour "compenser" le fait que le bouton <close> ne soit pas présent.