Le développement d’applications, d’extensions pour CMS requière de nombreuses compétences au nombre desquelles on compte des savoir faire en HTML, JavaScript, CSS3, PHP, base de données, etc. le Framework CSS Bootstrap est aujourd’hui largement adopté pour le développement d’interfaces web. Par exemple, pour développer un module Prestashop de qualité qui propose des widgets soit en backoffice, soit sur la partie publique, il faut avoir des connaissances avancées en Bootstrap. En recherche des idées, des solutions pour améliorer notre module Prestashop SEO Manager, nous avons appris beaucoup de chose que nous partagerons dans une série d’articles.

Apres nos tutoriels Bootstrap comme Bootstrap 3 formulaire de contact avancé, aujourd’hui apprenons à créer rapidement, des fenêtres modales Bootstrap.

C’est quoi les fenêtres modales ?

Un modal est une fenêtre (petite en général) qui s’affichent pour fournir a l’utilisateur une information, ou monter un formulaire avec des champs à saisir. Les dialogues sont de plus en plus utilisés car ils fournissent une meilleure expérience utilisateur quand on sait s’en servir. Par exemple, on peut afficher une fenêtre d’authentification sur une page avec des données protégées. L’internaute saisit son login et mot de passe. Quand il réussit, ses données personnelles sont sauvegardées en session, tout ceci sans forcement quitter la page courante.

La création de modal est simple. Vous pouvez créer des modaux très flexible qui vous permettrons de changer le titre à la volée, de charger des frames, du contenu ajax. Vous pouvez utiliser la même fenêtre pour plusieurs actions, et vous pouvez écouter les évènements et déclencher des traitements spécifiques.

Activation sans JavaScript

Pour ce faire, on utilise une combinaison de classes et les attributs data-*. Les attributs data-* ont été introduit avec HTML5 pour permettre de étendre les éléments avec des propriétés personnalisées.

On peut alors y accéder en JavaScript en utilisant le mot clé dataset.

Exemple :

Exemple

Créons un exemple tout simple qui affiche un message :

Que s’est-il passé ?

Nous avons créé le dialogue et nous l’avons associé à un bouton.

Le dialogue est un div avec l’identifiant myModal ; cet identifiant est repris via l’attribut href d’un élément a (html ancor) ou l’attribut data-target

Quant au bouton, nous utilisons l’attribut data-toggle= ‘modal’en associant avec data-target=’myModal’.

On peut configurer la taille de la fenetre en ajouter la classe .modal-lg ou .modal-sm avec la div dont la classe est .modal-dialog

Le dialogue comporte 3 zones : un header, un body et un footer.

Activation via JavaScript

Le code est légèrement différent. Au lieu de s’appuyer sur un bouton, on utilise un code JavaScript

On garde la même fenêtre modale, on supprime les attributs data-* sur le bouton et on remplace par le script js.

Le bouton change aussi et devient:

Il faut remarquer que le lien est remplacer par un vrai bouton HTML input.

Les évènements

Bootstrap modal est livré avec quelques événements qui déclenchent des traitements spécifiques.

Pour en savoir plus, lisez la document de Bootstrap.

Conclusion :

Dans cet article, vous avez appris à développer des dialogues avec le framework CSS Bootstrap et du JavaScript.

Grace au Bootstrap Modal, on peut développer des interfaces compactes, qui affichent des boites de dialogues uniquement quand elles sont utiles. Le serveur génère moins de pages et l’utilisateur bénéficie d’une navigation plus fluide.

Pour en savoir plus, visitez le site de Bootstrap à l’adresse http://getbootstrap.com/javascript/#modals