CSS

Animation CSS3

Fenêtre « modal responsive » en pure CSS3

Chrome 4.0 / IE 9.0 / Firefox 3.5 / Safari 3.2

Une fenêtre « modal responsive » en pure feuille de style CSS3, sans Javascript, compatible Internet Explorer 9+ !

Voilà un des meilleurs exemples de la série « Pur CSS » ou sans Javascript. Le tout grâce au sélecteur CSS3 méconnus :target. Négligé parce que trop souvent servi avec la même sauce insipide et pourtant, la pseudo-classe est déjà compatible depuis la version 9 d’Internet Explorer! Simple comme un hyperlien, le sélecteur :target, à l’instar du sélecteur bien connu :hover, s’active sur un hyperlien, une fois la « cible » du lien (#ancre) atteinte. Il n’est plus actif dès que le focus change de cible.

Dans ça plus simple expression

/* CSS */
.cModal {
  ...
  visibility: hidden;
}

.cModal:target {
  ...
  visibility: visible;
}

<!-- HTML -->
<div class="cModal" id="modal1">
  <header>
    <a href="#">FERMER</a>
    <h2>TEST 1</h2>
  </header>
</div>

<a href="#modal1">Ouvrir l’exemple</a>

La plus simple des solutions

Exemple simple et complet avec fignolage et une petite animation CSS3! Ouvrir l’exemple

1. CSS3 : cModal : Il faut créer avant tout une classe, invisible opacity:0;, avec une position « fixed », pleine page pour isoler le popup du contenu de la page.

2. CSS3 : cModal:target : Ajouter la pseudo-classe pour le rendre visible opacity:1;.

3. CSS3 : cModal > div : Créer une classe-enfant de l’objet DIV avec une position « relative » pour le style du popup.

4. HTML : oModal : Créer un objet DIV avec la classe « cModal » et ajouter un ID (sélecteur) unique « oModal ».

5. HTML : DIV : Créer un objet DIV qui contient le popup.

6. HTML : #oModal : Créer un hyperlien avec l’ID « oModal » comme référence. <a href="#oModal">OUVRIR</a> pour activer le sélecteur :target et ouvrir le div id="oModal".

7. HTML : Même chose pour fermer le popup. Il suffit de faire un lien vers une autre ancre <a href="#ailleurs">FERMER</a>!

<style>
/* CSS */
.cModal {
  position: fixed;
  z-index: 99999;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.8);
  opacity:0;
  pointer-events: none;
}
.cModal:target {
  opacity:1;
  pointer-events: auto;
}
.cModal > div {
  max-width: 400px;
  position: relative;
  margin: 10% auto;
  padding: 8px 8px 8px 8px;
  border-radius: 2px;
  background: #fff;
}
</style>


<div id="oModal" class="cModal">
  <div>
    <header>
      <h2>Exemple de fenêtre « modal » simple</h2>
    </header>
    <p>Fenêtre popup simple.</p>
    <footer class="cf">
      Fermer
    </footer>
  </div>
</div>

Ouvrir le popup

<style>
/* CSS */
.cf:before,
.cf:after {
  content:"";
  display:table;
}
.cf:after {
  clear:both;
}
.droite {
  float:right;
}

.oModal {
  position: fixed;
  z-index: 99999;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.8);
  opacity:0;
  -webkit-transition: opacity 400ms ease-in;
  -moz-transition: opacity 400ms ease-in;
  transition: opacity 400ms ease-in;
  pointer-events: none;
}

.oModal:target {
  opacity:1;
  pointer-events: auto;
}

.oModal:target > div {
  margin: 10% auto;
  transition: all 0.4s ease-in-out;
  -moz-transition: all 0.4s ease-in-out;
  -webkit-transition: all 0.4s ease-in-out;
}

.oModal > div {
  max-width: 600px;
  position: relative;
  margin: 1% auto;
  padding: 8px 8px 8px 8px;
  border-radius: 5px;
  background: #eee;
  transition: all 0.4s ease-in-out;
  -moz-transition: all 0.4s ease-in-out;
  -webkit-transition: all 0.4s ease-in-out;
}

.oModal > div header,.oModal > div footer {
  border-bottom: 1px solid #e7e7e7;
  border-radius: 5px 5px 0 0;
}
.oModal .footer {
  border:none;
  border-top: 1px solid #e7e7e7;
  border-radius: 0 0 5px 5px;
}

.oModal > div h2 {
  margin:0;
}

.oModal > div .btn {
  float:right;
}

.oModal > div section,.oModal > div > header, .oModal > div > footer {
  padding:15px;
}
</style>



<div id="oModal" class="oModal">
  <div>
    <header>
      <a href="#fermer" title="Fermer la fenêtre" class="droite">X</a>
       <h2>Exemple de fenêtre « modal » stylisée </h2>
     </header>
     <section>
      <p>Description du message. </p>
     </section>
     <footer class="cf">
      <a href="#fermer" class="btn droite" title="Fermer la fenêtre">Fermer</a>
     </footer>
  </div>
</div>

<a href="#oModal">Ouvrir le popup</a>

* Unité de mesure viewport « vw » compatible : IE 10+, Firefox 19+, Chrome 20+, Safari 6+

Élément <dialog>

La fenêtre modale est l’une des interfaces utilisateurs (UI) les plus utilisées. Il n’y a donc rien de surprenant pour que le HTML5 introduise une nouvelle balise appelée <dialog> qui permet de créer une fenêtre modale native d’une manière beaucoup plus simple, en théorie...

Malheureusement, ce n’est pas si vrais, car ça reste une balise qui ne change rien. Il n’y a pas de style, outre Google Chrome c’est une fenêtre pleine largeur. On pourrait utiliser <div class"dialog">...</div> sans problème. Il y a toute foi un nouveau pseudo-élément ::backdrop pour la trame de fond qui ne fonctionne pas davantage...

Son utilisation est la même qu’avec les autres balises HTML. Simplement ajouter le contenu a afficher dans la fenêtre de dialogue :

<dialog id="maModal">
  <header>
    <h3>Salut le monde!</h3>
  </header>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Earum, inventore!</p>
  <footer>
    <button id="oFermer">Fermer</button>
  </footer>
</dialog>

<button id="oAffiche">Affiche</button>

NOTE IMPORTANTE Incompatible avec la majorité des navigateurs, seul Google Chrome supporte cette nouvelle balise. Il faut donc au préalable cacher la fenêtre (hidden).

<dialog id="maModal" style="display:none">
...

Pire, ça prend même un jQuery pour faire la job!

(function() {
  var dialog = document.getElementById('window');
  document.getElementById('oAffiche').onclick = function() {
    dialog.show();
  };
  document.getElementById('oFermer').onclick = function() {
    dialog.close();
  };
})();

Conclusion

Voilà c’est tout, n’est-ce pas merveilleux, pas une seule ligne de Javascript! Une excellente base pour gérer de courtes boîtes de dialogue avec un résultat étonnant. Essayez-le à répétition, comme l’exemple des Trucsweb.com. Un peu d’ajustement, notamment au niveau de la détection des mobiles ou la gestion des des boîtes de saisie d’un formulaire. Pour un contenu plus volumineux, il faut modifier le positionnement « fixe » pour permettre le défilement etc.

Déjà on peut très bien intégrer un cadre « iFrame » et ouvrir des pages externe. Et même dynamiser le tout avec un petit de javascript. L’idée est une autonomie mais la manipulation avec un langage script a ses facilités. Une petite fonction pour changer dynamiquement le contenu et ouvrir le popup.

/* Javascript */
function twPopUpDynamique(sModal,sTitre,sTexte) {
  document.getElementById("oTitre").innerHTML = sTitre;
  document.getElementById("oTexte").innerHTML = sTexte;
  location.href = "#" + sModal;
}
twPopUpDynamique("oModalDynamique","Mon titre","Mon texte");

Mais faut bien comprendre que cette technique est l’aboutissement d’une décennie de développement et qu’il existe sur le marché des centaines de solutions toutes plus ingénieuses les unes que les autres en Javascript. Je vous conseille personnellement le ténu TinyBox JavaScript Popup Box avec ces 3.4KB.

Références

• CSS Modal (Modals built out of pure CSS) @auteur Hans Christian Reinl
• Pure HTML5/CSS3 Responsive Modal Window par Freebies, Tutorials
• CSS Tricks - On :target
• A simple image gallery using only CSS and the :target selector