Trucsweb.com

Trucsweb.com

CSS

Animation CSS3

RDFFav

Fenêtre « modal responsive » en pure CSS3

Une fenêtre « modal responsive » en pure feuille de style CSS3, sans Javascript, compatible Internet Explorer 9+ !fenêtre, popup, modal, pure css, css3, sélecteur, animationFenê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>


Saut en haut de page

Cette technique fait un saut en haut de la page comme une ancre qui n’existe pas. Mais comme on peut voir dans l’exemple #1, le problème est imperceptible puisque le lien et le popup sont déjà en haut de la page. Une alternative est d’utiliser un popup relatif sur un fond fixe : position: fixed;. Voir l’exemple #2 plus bas. Une solution intéressante à ce problème est d’utiliser la technique du CSS2. Un champ de saisie caché (input de type hidden). Voir un exemple avec La fenêtre Modal de Luiz Felipe Tartarotti Fialho


/* CSS */
.modal-open:checked ~ .modal-wrap:before,
.modal-open:checked ~ .modal-wrap .modal-overlay {
  display: block;
}
.modal-open:checked ~ .modal-wrap .modal-dialog {
  -webkit-transform: translate(-50%, 0);
  -ms-transform: translate(-50%, 0);
  -o-transform: translate(-50%, 0);
  transform: translate(-50%, 0);
  top: 20%;
}

<!-- HTML -->
<input class="modal-open" id="modal-one" type="checkbox" hidden>


Il y a aussi le Javascript, pire le jQuery pour capturer les liens-ancre. Mais bon, on est loin de notre pure CSS!


// Javascript
$("a[href^=#]").on("click", function(e) {
  e.preventDefault();
  history.pushState({}, "", this.href);
});




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>!


Exemple simple



<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


Exemple complet avec style



<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>
Modal (dialog) HTML5
Exemple avec Chrome

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>
<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
X

Exemple de fenêtre « modal » stylisée

Description du message.

, Analyste programmeurConception oznogco multimédia (https://oznogco.com), Trucsweb
Dernière mise à jour :

Commentaires

  • Gigantesque ce mini script ! Chapeau. Ras le bol des usines à gaz, ce PopUp est complètement bluffant. Grand merci, je reviendrai sur ce site ;-)
    64x64
    Dan
    Date (GMT) : 2015-02-08 0:9:37 (UTC +0000)
    • Tres bon script ! mais je veux que le pop up (fenetre modal) s'affiche a l'heure d'accee au site ! svp aider moi voila mon adresse mail : benabou.molaylmehdi@gmail.com
      64x64
      benabou molaylmehdi
      Date (GMT) : 2015-03-07 2:31:18 (UTC +0000)


    • Génial cette fenêtre modal. J'ai ajouté overflow-y: auto; et max-height: 400px; dans la class .oModal > div et ainsi lorsque le contenu dépasse la fenêtre, le scroll se met en place. Merci Stéphane
      64x64
      Stéphane
      Date (GMT) : 2015-02-21 16:12:38 (UTC +0000)

      • Merci !! Très bon script !!
        64x64
        Sylvain
        Date (GMT) : 2015-03-04 9:15:30 (UTC +0000)

        • Excellent script mais sauriez-vous comment procéder pour que la modal se ferme également au clic en dehors de la fenêtre ?
          64x64
          onekript
          Date (GMT) : 2015-03-27 9:52:47 (UTC +0000)
          • Salut, On demande généralement d'empêcher de fermer la fenêtre pour forcer l'internaute à interagir ; -) Malheureusement ce n'est pas possible en pure CSS. Ce script est la plus simple expression d'un popup. Quelques lignes de CSS. Le contour n'est pas un conteneur (wrapper) comme la plupart des scripts, qu'il suffirait de cibler pour fermer la fenêtre. Or donc rapidement je ne vois que le Javascript : var oMonModal = document.getElementById('oModal'); oMonModal.addEventListener('click', function(e) { if (e.target.tagName === 'DIV'){document.location = '#ferme';} }); J'espère que ça fera l'affaire. Ciao
            64x64
            oznog
            Date (GMT) : 2015-03-27 12:40:25 (UTC +0000)
            • Superbe code. Une simplicité que j'adore !! J'ai ajouté ton javascript (donné en réponse à un commentaire) pour fermer la modale en cliquant en dehors :` var oMonModal = document.getElementById('oModal'); oMonModal.addEventListener('click', function(e) { if (e.target.tagName === 'DIV'){document.location = '#ferme';} }); Mais cela ne fonctionne pas... J'ai ajouté ce script dans une page javascript chargée dans le header de la page. C'est bien ça ? Voilà le code : page books.php : <div id="popIn" class="pop_in"> <div> <div id="cover">Pas de couverture</div> <p class="style1"> <a href="#fermer" class="btn_bleu3">Fermer</a> </p> </div> </div> <a onmouseover="Pop_up('<?php echo $id_book; ?>')" href=""><?php echo $id_book; ?></a> javascript : function Pop_up(photo_id) { document.getElementById("cover").innerHTML = "<img src='img/covers/"+photo_id+".jpg'>"; window.location = "#popIn"; } var oMonModal = document.getElementById('popIn'); oMonModal.addEventListener('click', function(e) { if (e.target.tagName === 'DIV') { document.location = '#fermer'; } }); css : .pop_in { position: fixed; z-index: 99999; top: 0; right: 0; bottom: 0; left: 0; background: rgba(11, 13, 42, 0.5); opacity:0; pointer-events: none; -webkit-transition: opacity 400ms ease-in; -moz-transition: opacity 400ms ease-in; transition: opacity 400ms ease-in; } .pop_in:target { opacity:1; pointer-events: auto; } .pop_in > div { max-width: 350px; position: relative; margin: 1% auto; padding: 15px 10px 15px 10px; border-radius: 4px; background: #fff; transition: all 0.4s ease-in-out; -moz-transition: all 0.4s ease-in-out; -webkit-transition: all 0.4s ease-in-out; } .pop_in: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; }
              64x64
              Alix
              Date (GMT) : 2018-07-15 14:25:50 (UTC +0000)
              Date local : Sun Jul 15 2018 16:29:22 GMT+0200 (CEST)
              • Salut Il fonctionne ton code http://www.trucsweb.com/tutoriels/css/css-modal/modal.htm Ou sur Codepen : https://codepen.io/Oznog/pen/QByMEj Il doit y avoir interférence avec un autre code ?
                64x64
                oznog
                Date (GMT) : 2018-07-15 14:43:05 (UTC +0000)
                Date local : Sun Jul 15 2018 10:46:37 GMT-0400




          • Bonjour Bravo pour le script très réussi. J'aurais voulu savoir si il était possible de bloquer le scroll de la page en arrière plan seulement quand la div modale est ouverte.
            64x64
            Coeurcoeur
            Date (GMT) : 2015-04-02 12:25:49 (UTC +0000)
            • Salut, C'est pas moi, c'est la W3C et le merveilleux monde du CSS3 ; -) En CSS ce n'est pas possible, il faut passer au javascript. Mais c'est très simple, il suffit d'ajouter un « overflow:hidden » au body. Ou comme bootstrap, ajouter une classe (modal-ouvert) au body. .modal-ouvert { overflow:hidden; } Le problème est de détecter l'ouverture du PopUp. Malheureusement les pseudoclass ne font pas parti du DOM. On ne peu pas ajouter un écouteur (listener) comme oMonModal.addEventListener('target')... pour détecter l'ouverture du popUp. On peut le détecter de façon détourné, la transition par exemple 'transitionend' en testant si la classe est déjà présente : element.classList.contains('modal-ouvert'), mais il faut gérer une booléenne pour s'assurer de l'état de la transaction. Même le jQuery $(#oModal).on(show)... ne fonctionnerait pas. Or donc, le plus simple est d'ajouter l'écouteur directement dans le bouton qui ouvre la fenêtre. <a href=#oModal id=oBouton>Ouvrir le popup</a> var oMonBouton = document.getElementById('oBouton'); oMonBouton.addEventListener('click', function(e) { var element = document.getElementsByTagName('body')[0]; element.classList.add('modal-ouvert'); }); Voilà. Pour remettre la barre, il faut cibler le bouton, sans id : document.getElementById('oModal').addEventListener('click', function(e) { var element = document.getElementsByTagName('body')[0]; if (e.target.className === 'btn'){element.classList.remove('modal-ouvert');} }); Avec id : (ajouter le id « bFermer » sur le bouton fermer) <a href=#fermer id=bFermer class=btn>Fermer</a> document.getElementById('bFermer').addEventListener('click', function(e) { var element = document.getElementsByTagName('body')[0]; element.classList.remove('modal-ouvert'); }); En conclusion, ça reste très loin du pure CSS.
              64x64
              oznog
              Date (GMT) : 2015-04-02 14:14:21 (UTC +0000)


            • Le tuto est vraiment intéressant ! Le seul problème, ça ne fonctionne pas dans IE9 (à moins d'avoir loupé quelque chose). D'ailleurs quand je charge cette page http://www.trucsweb.com/tutoriels/css/css-modal/ dans Internet Explorer 9 je ne peux accéder à aucun liens, comme si les HREF avaient toutes disparues. vous avez une idée ? merci encore pour le partage Marc
              64x64
              Marc Hild
              Date (GMT) : 2015-05-04 13:48:34 (UTC +0000)
              • Salut, Ce n'est pas surprenant, dire qu'IE va aussi disparaitre, on avait tellement travaillé pour Netscape aussi. J'ai tout Firefox depuis la version 3, j'aimerais bien trouver le bogue pour vous mais je n'ai malheureusement pas accès aux vieilles versions d'IE pour faire les tests, plus difficile à garder. Enfin ce n'est pas le tuto mais surtout le :target qui est intéressant. Statistiques IE en 2015 : - IE 11 (4.1 %) - IE 10 (1.0 %) - IE 9 (1.4 %) - IE 8 (1.1 %) - IE 7 (0.1 %) Et je comprends très bien votre préoccupation, rien n'est plus important que la compatibilité (et la simplicité) d'un site Web. C'est fort possible que cette technique ne soit pas tout à fait prête pour le grand public. Pour les Trucsweb, c'est davantage un espace expérimental qui utilise, je dirais qui patauge dans les nouveaux techniques pour les webmestres bien équipés. Mettons que j'ose davantage qu'un site grand public mais j'avoue que je croyais les Trucsweb compatible IE9 . Le mieux que je peux faire c'est d'indiquer IE10 ! Mais ça reste du simple CSS et la littérature parle d'IE9, c'est probablement un détail. Déjà, est-ce que l'exemple le plus simple fonctionne avec votre IE9? Tout est dans ce bout de code! Si le code fonctionne, testez-le en ajoutant les propriétés de la fenêtre une à la fois pour déjà trouver ce qui fait défaut. Sinon, mieux vaut oublier la technique pour l'instant! <style> .cModal { visibility: hidden;} .cModal:target {visibility: visible;} </style> <div class=cModal id=modal1> <a href=#>Fermer</a> </div> <a href=#modal1>Ouvrir</a>
                64x64
                oznog
                Date (GMT) : 2015-05-04 14:51:2 (UTC +0000)
                • Merci pour la réponse, j'ai trouvé le problème :) IE9 (sans doute IE10 aussi) se fige sur la propriété : pointer-events. Pour l'instant je ne sais pas comment remplacer cette fonctionnalité. Dans l'exemple ci-dessus en remplaçant : - pointer-events: none; par visibility: hidden; - pointer-events: auto; par visibility: visible; l'exemple fonctionne aussi sous IE9.
                  64x64
                  Marc
                  Date (GMT) : 2015-05-04 16:39:53 (UTC +0000)
                  • Ah oui, en fait « pointer-events » est pour le support des écrans tactiles. Mais je fais un shortcut et l'utilise pour régler un problème du z-index. Merci, je vais mettre à jour le tutoriel. Pourquoi? Même transparente, la fenêtre en « position absolue » est en haut et au-dessus du lieu, c'est pour cette raison que le lien ne fonctionne plus. Alors c'est soit passé au Javascript pour le support des écrans tactiles et une de ses méthodes : 1. Mettre les fenêtres en « position absolue » seulement une fois le « target » actif. 2. Utiliser « visibility: hidden; » au lieu de la transparence « opacity: 0; » comme vous proposer. Notez que la propriété « opacity » est aujourd'hui privilégiée. 3. Ou, régler le vrai problème, placer la fenêtre modale sous le lien : .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; z-index: 99999; pointer-events: auto; }
                    64x64
                    oznog
                    Date (GMT) : 2015-05-04 17:4:15 (UTC +0000)




              • Bonjour et merci pour ce tuto ! J'ai un petit problème. J'essaye d’intégrer cette modale dans un slider full page vertical qui contient 4 slides (j'utilise jquery onepage-scroll). Je voudrais qu'elle s'affiche dans la 2éme slide et bien que le lien soit placé dans cette 2éme, la modale s'ouvre dans la slide 1. Auriez vous une idée ?
                64x64
                Romain
                Date (GMT) : 2015-05-05 14:39:42 (UTC +0000)
                • Salut, À mon avis il suffit de placer non pas seulement le bouton mais aussi la modale (cachée) dans le bon « slide ». Mais qu'elle ironie, c'est un tutoriel pour se passer de jQuery, si vous l'utilisez déjà il y a une modale bien plus robuste avec jQuery! Vous avez déjà une librairie jQuery? <script> $(function() { $( #dialog ).dialog(); }); </script> <div id=dialog title=Basic dialog> <p>Boîte de dialogue.</p> </div> Source : https://jqueryui.com/dialog/
                  64x64
                  oznog
                  Date (GMT) : 2015-05-05 15:6:2 (UTC +0000)


                • Je continue avec joie de mettre en pratique ce tuto. C'est élégant et ça fonctionne. Le problème que je rencontre maintenant c'est que j'affiche des formulaires et les boutons submit ou reset n'actionnent rien. Que faudrait-il ajouter ?
                  64x64
                  Marc
                  Date (GMT) : 2015-07-15 9:0:48 (UTC +0000)

                  • (suite du précédent commentaire) Diantre, quelqu'un a posé la question pour le scroll. Désolé :-).
                    64x64
                    Pyraah
                    Date (GMT) : 2015-09-05 6:30:19 (UTC +0000)

                    • J'ai une question qui peut vous faire sourire, mais je ne suis pas une épée en programmation. J'ai utilisé le script de la pop up qui fonctionne à merveille, mais ma question est : Que faut il faire pour afficher 2 pop up sur la meme page ? Merci à vous pour votre réponse
                      64x64
                      Bernard
                      Date (GMT) : 2015-10-21 12:27:24 (UTC +0000)
                      • Salut, En CSS la clé c'est le ID, identifiant unique d'un objet. Il suffit de modifier le ID : <!-- HTML --> <div id=oModal1 class=cModal> <div> <header> <h2>Exemple de fenêtre « modal 1 » simple</h2> </header> <p>Fenêtre popup simple.</p> <footer class=cf> <a href=#fermer class=btn>Fermer</a> </footer> </div> </div> <a href=#oModa1l>Ouvrir le popup</a> <!-- HTML --> <div id=oModal2 class=cModal> <div> <header> <h2>Exemple de fenêtre « modal 2 » simple</h2> </header> <p>Fenêtre popup simple.</p> <footer class=cf> <a href=#fermer class=btn>Fermer</a> </footer> </div> </div> <a href=#oModal2>Ouvrir le popup</a> J'ai aussi fait une fonction Javascript pour dynamiser le contenu d'un seule et même popup. /* Javascript */ function twPopUpDynamique(sModal,sTitre,sTexte) { document.getElementById(oTitre).innerHTML = sTitre; document.getElementById(oTexte).innerHTML = sTexte; location.href = # + sModal; } <!-- HTML --> <div id=oModalDynamique class=cModal> <div> <header> <h2 id=oTitre>Exemple de fenêtre « modal 2 » simple</h2> </header> <p id=oTexte>Fenêtre popup simple.</p> <footer class=cf> <a href=#fermer class=btn>Fermer</a> </footer> </div> </div> twPopUpDynamique(oModalDynamique,Mon titre,Mon texte);
                        64x64
                        oznog
                        Date (GMT) : 2015-10-21 12:52:47 (UTC +0000)


                      • Bonjour. C'est vraiment super...par contre je butte sur comment récupérer dans la fenetre non modale les données d'un formulaire situé dans la fenêtre modale.quand je sort mes variables post sont tjs vides.(idem que marc précédemment).
                        64x64
                        Hervherve
                        Date (GMT) : 2015-11-09 5:30:8 (UTC +0000)
                        • Salut, Faudrait voir ton code... Merci.
                          64x64
                          oznog
                          Date (GMT) : 2016-01-04 14:51:37 (UTC +0000)


                        • À mon avis, il manque un / ligne 90, non ? Excellent script ^_^ Enfin, je vais pouvoir me passer de Jquery/Colorbox !
                          64x64
                          Nicolas
                          Date (GMT) : 2015-12-24 17:15:55 (UTC +0000)
                          • Salut, Effectivement, merci. À part se simplifier la vie et gaspiller de l'énergie, jQuery est de moins en moins utile... Bonne année à tous...
                            64x64
                            oznog
                            Date (GMT) : 2016-01-04 14:58:19 (UTC +0000)


                          • Bravo pour votre tuto, il m'a été très utile. J'ai dû utiliser l'astuce z-index: -99999; pour que ça fonctionne sous IE9. Bonne continuation.
                            64x64
                            Richou
                            Date (GMT) : 2016-03-07 16:33:22 (UTC +0000)

                            • Bravo, un des scripts (le ?) le plus utile jamais trouvé sur le web les scripts en js avec Jquery sont pas mal (bien que pas tjs responsives ! hé oui) mais quand il y en a plusieurs sur la même page, ça devient rude à mettre en place et à éviter les conflits en plus, ceci permet de réduire les pages puisque tout le contenu des popups se trouve sur une seule page (dans mon cas ma page d'index entre autre) -> référencement grandement avantagé vraiment, bravo et merciii !!
                              64x64
                              Jacq
                              Date (GMT) : 2016-03-11 9:5:11 (UTC +0000)

                              • encore moi ;) j'utilise votre script sur un petit site que j'ai fait pour un ami (www.parolier.be) quand on clique sur les CD on a une fenêtre modale qui s'ouvre et affiche le texte il y a aussi un petit lecteur interne mp3 qui permet d'entendre le morceau et évidemment, quand on ferme la fenêtre ... le mp3 continue à jouer :/ - logique y a t-il donc moyen de coupler un évènement au #fermer qui coupe ce mp3 ? je suppose que oui, en js ? ou pas ... merci d'avance jacq
                                64x64
                                Jacq
                                Date (GMT) : 2016-03-15 7:30:48 (UTC +0000)
                                • Salut, Oui, bizarrement il n'y a pas de « stop »avec le HTML5. Tu peux ajouter une pause directement dans le bouton « fermer » avec un onclick. <a onclick="document.getElementById("audiojs_wrapper0").pause();" href="#fermer" title="Fermer la fenêtre" class="droite"><font color="#000000"><font size="+2">X</font></font></a> Pour faire un véritable « stop » il faut vider la source etc. Il y a aussi la méthode .remove() qui supprime carrément l'objet, et donc le son. <a onclick="document.getElementById("audiojs_wrapper0").remove();" href="#fermer" title="Fermer la fenêtre" class="droite"><font color="#000000"><font size="+2">X</font></font></a> Ciao
                                  64x64
                                  oznog
                                  Date (GMT) : 2016-03-15 12:18:42 (UTC +0000)
                                  • re oui je pensais à un onclick (sans trop savoir comment le mettre en place avec la balise # mais tu as répondu) et en effet et une mise en pause suffira (j'ai un peu regardé entretemps la doc des balises audio en html5 et c'est vrai que je n'ai pas trouvé de stop non plus) un tout grand merci pour ton aide j'ai parcouru ton site et c'est vraiment super ce que tu fais ;) bonne continuation (je reviendrai sûrement :))
                                    64x64
                                    Jacq
                                    Date (GMT) : 2016-03-15 14:49:17 (UTC +0000)



                                • ben finalement ça fonctionne pas j'ai essayé plusieurs solutions, dont en mettant un id au morceau : <a onclick="document.getElementById("cendrillon").pause();" href="#fermer" title="Fermer la fenêtre" class="droite"><font color="#000000"><font size="+2">X</font></font></a> et <audio preload="auto"> <source src="cendrillon.mp3" id="cendrillon"> </audio> pourtant sur plusieurs forum je retrouve la même solution +/- genre : <audio src="lorie.mp3" style="display:none" id="player"> <a href="#" title="Lancer la lecture"><img src="play.png" alt="Lecture" id="btnplay"></a> <a href="#" title="Mettre en pause"><img src="pause.png" alt="Pause" id="btnpause"></a> <script> document.getElementById('btnplay').onclick = function() { document.getElementById('player').play(); return false; } document.getElementById('btnpause').onclick = function() { document.getElementById('player').pause(); return false; } </script> on retrouve bien le getElementById('player').pause() mais ... ça fonctionne pas :/
                                  64x64
                                  Jacq
                                  Date (GMT) : 2016-03-15 15:17:6 (UTC +0000)
                                  • Ton ID douit être dans la balise audio, pas la source <audio preload="auto" id="cendrillon"> <source src="cendrillon.mp3"> </audio> <a onclick="document.getElementById("cendrillon").pause();" href="#fermer" title="Fermer la fenêtre" class="droite"><font color="#000000"><font size="+2">X</font></font></a>
                                    64x64
                                    oznog
                                    Date (GMT) : 2016-03-15 17:1:55 (UTC +0000)


                                  • merci ça ne change rien je vais tenter autre chose merci encore ;)
                                    64x64
                                    Jacq
                                    Date (GMT) : 2016-03-16 6:54:31 (UTC +0000)

                                    • salut juste pour ton info j'y suis arrivé : il faut de simple ' et non " autours de l'ID c'est ça qui posait problème et sur Firefox il semble que l'action -pause- est problématique, donc il vaut mieux vider avec -remove- comme tu le suggérais bonne continuation ;) jacq
                                      64x64
                                      Jacq
                                      Date (GMT) : 2016-03-18 16:8:55 (UTC +0000)

                                      • pour fermer la fenêtre avec une vidéo comment peut on faire ?
                                        64x64
                                        PETITPAS
                                        Date (GMT) : 2016-04-24 18:44:10 (UTC +0000)
                                        • Salut, C'est exactement comme avec le MP3. Il ne suffit pas de fermer la fenêtre, il faut aussi fermer la vidéo. Ou faire une pause. Voir le commentaire précédent qui explique le tout. Tu as un ID? document.getElementById('monID').pause(); Ciao
                                          64x64
                                          oznog
                                          Date (GMT) : 2016-04-25 12:12:16 (UTC +0000)


                                        • Bonjour ! Étant une buse complète en web, ce code m'a évité bien des sueurs froides imprégnées de jQuery... Ceci dit un petit problème persiste : quand je met plusieurs liens à la suite des autres qui ouvrent chacun une fenêtre pop up avec un contenu différent, c'est celui du premier lien qui s'ouvre à chaque fois (sous entendu pour tout les autres liens). Voici mon code : HTML <body> <div id="oModal" class="cModal"><div><img src="popup/type105.jpg" /><a href="#fermer" class="btn">X</a></div></div> <a href="#oModal"><img src="images/type105.jpg" /></a> <div id="oModal" class="cModal"><img src="popup/type104.jpg" /><a href="#fermer" class="btn">X</a><</div> <a href="#oModal"><img src="images/type104.jpg" /></a> </body> et le 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: 600px; height:600px; position: relative; margin:30px auto 30px; } .btn { position: absolute; top: 10px; right: 20px; text-decoration:none; font-family:Arial, Helvetica, sans-serif; font-size: 18px; font-weight: bold; color: #999; } .btn:hover { color: #333; } Je voudrais quand je clique sur "images/type104.jpg" ouvrir "popup/type104.jpg" et quand je clique sur "images/type105.jpg" ouvrir "popup/type105.jpg" or quand je clique sur type104 c'est type 105 qui s'ouvre en popup... Merci d'avance pour votre aide ! William
                                          64x64
                                          William F
                                          Date (GMT) : 2016-05-10 10:29:0 (UTC +0000)
                                          • Salut, Le secret c'est le « ID » et dans une page Web (comme dans la vraie vie) il ne peut y avoir qu'un seul ID. Dans ton code les deux images sont dans le même objet. En fait le deuxième n'existe pas, ton lien aussi ouvre toujours le même ID. <div id="oModal1" class="cModal"><div><img src="popup/type105.jpg" /><a href="#fermer" class="btn">X</a></div></div> <a href="#oModal1"><img src="images/type105.jpg" /></a> <div id="oModal2" class="cModal"><img src="popup/type104.jpg" /><a href="#fermer" class="btn">X</a></div> <a href="#oModal2"><img src="images/type104.jpg" /></a> Ciao
                                            64x64
                                            oznog
                                            Date (GMT) : 2016-05-10 11:31:49 (UTC +0000)
                                            • J'oubliais, va lire le tutoriel sur les modales avec images. http://www.trucsweb.com/tutoriels/CSS/css-modal-image/ Toujours sans jQuery.
                                              64x64
                                              oznog
                                              Date (GMT) : 2016-05-10 11:42:32 (UTC +0000)



                                          • Bonjour Bizarrement, l'exemple simple ne marche pas sous IE11/win10, il affiche la partie modale puis le lien dessous. J'ai essayé la modification conseillée en commentaire, sans succès. Code HTML: <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; z-index: 99999; pointer-events: auto; } .cModal > div { max-width: 400px; position: relative; margin: 10% auto; padding: 8px 8px 8px 8px; border-radius: 2px; background: #fff; } </style> <!-- HTML --> <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"> <a href="#fermer" class="btn">Fermer</a> </footer> </div> </div> <a href="#oModal">Ouvrir le popup</a>
                                            64x64
                                            Christophe
                                            Date (GMT) : 2017-08-07 16:19:27 (UTC +0000)
                                            • Salut, J'aimerais bien t'aider mais sous Windows 10 ton code fonctionne dans mon cas : sous IE11, comme Edge 40, Firefox 40 et Chrome 58!
                                              64x64
                                              oznog
                                              Date (GMT) : 2017-08-07 16:49:45 (UTC +0000)
                                              • J'ai enfin compris le problème avec IE 11. Mon document HTML se trouvait sur le réseau, et IE l'affichait en mode de compatibilité (IE 5 sans doctype, et IE 7 avec un doctype). Il suffit dans ce cas d'ouvrir le menu d'outils (la roue dentée à droite), d'entrer dans "Paramètres d'affichage de compatibilité" puis de décocher "Afficher les sites intranet dans Affichage de compatibilité" Et là tous les codes sources de l'exemple simple marchent (les originaux dans le texte principal, et les corrections en commentaires).
                                                64x64
                                                Christophe
                                                Date (GMT) : 2017-08-10 9:27:45 (UTC +0000)
                                                • Salut, Oui, il faut toujours déclarer le doctype, particulièrement avec le HTML5. Pour la compatibilité, IE est effectivement complexe à ce niveau. Mais tu peux aussi ajouter la balise méta, compatible IE9 par exemple : <meta http-equiv="X-UA-Compatible" content="IE=9"/> Tu peux ajouter la « passe » IE, encore une tache à la IE. Seule IE comprend ce code alors seul IE l'interprète : <!--[if IE]> <meta http-equiv="X-UA-Compatible" content="IE=9"/> <![endif]-->
                                                  64x64
                                                  oznog
                                                  Date (GMT) : 2017-08-10 11:36:8 (UTC +0000)




                                            • Une autre question. Pour éviter qu'en fermant la partie 'modale' l'adresse de la page finisse par "#fermer", je remplace l'adresse de fermeture de cette partie avec href="". Ça marche très bien dans tous les navigateurs, sauf comme toujours dans IE11 (même en ayant réglé le problème de compatibilité mentionné plus haut): lorsque je clique pour fermer cette partie modale, IE11 ouvre d'Explorateur de fichiers. Encore une bizarrerie d'IE. Y a-t-il une façon de fermer la partie modale en retrouvant l'adresse de page normale (sans '#' de lien), et sans recharger toute la page ?
                                              64x64
                                              Christophe
                                              Date (GMT) : 2017-08-10 9:40:16 (UTC +0000)
                                              • Comme je dis dans le tutoriel, c'est le défaut de la technique. Mais ça permet d'utiliser seulement du CSS sans aucune ligne JavaScript et donc la fonctionnalité est toujours active même quand l'usager bloque le JavaScript. Un hyperlien vide se comporte exactement comme une ancre, c'est pourquoi on n'a pas besoin d'ancre « haut » car par défaut le navigateur remonte naturellement en haut de la page. C'est d'ailleurs un problème avec le JavaScript exécuté dans un hyperlien, il faut annuler cet effet. Mais tu peux bien entendu utiliser le JavaScript : jQuery : https://jqueryui.com/dialog/ Ou directement, quelque chose comme : var modal = document.getElementById('oModal'); var bouton = document.getElementsByClassName("btnFerme")[0]; // Clic sur le bouton fermé bouton.onclick = function() { modal.style.opacity = "0"; } // Clic à l'extérieur de la modal window.onclick = function(event) { if (event.target == modal) { modal.style.opacity = "0"; } } Ciao
                                                64x64
                                                oznog
                                                Date (GMT) : 2017-08-10 12:7:19 (UTC +0000)


                                              • Ton code est super. Y a juste un ptit truc, en version mobile et ipad (900px) Le pop up disparait. Peux tu me pointer sur quoi faire pour régler ce problème ???
                                                64x64
                                                Alexandre Parent
                                                Date (GMT) : 2017-10-27 15:49:18 (UTC +0000)
                                                Date local : 10/27/2017 11:49:50 AM GMT -400 (Est)
                                                • Salut, Il devrait fonctionner avec un iPod, un iPhone et un iPad. Ou bien l’appareil manque de mémoire ou bien ton code fait interférence. JavaScript ou même CSS.
                                                  64x64
                                                  oznog
                                                  Date (GMT) : 2017-10-27 23:24:16 (UTC +0000)
                                                  Date local : Fri Oct 27 2017 19:24:44 GMT-0400 (Est)


                                                • Très bon exemple de pop-up, ma question et la suivante: je voudrait que ce pop-up s'affiche automatiquement quand j'actualise ma page, est-il possible?
                                                  64x64
                                                  hachem
                                                  Date (GMT) : 2018-11-26 16:26:22 (UTC +0000)
                                                  Date local : Mon Nov 26 2018 16:32:58 GMT+0000 (heure normale d
                                                  • Salut, En fait la question serait plutôt « comment ouvrir le popup automatiquement au chargement de la page ». Car le rafraichissement actualise le URL et ce URL contiens #ferme dès que la popup a été fermée ! Mais si la page s'ouvre en partant avec le Popup : http://www.trucsweb.com/tutoriels/CSS/css-modal/#oModalExemple est-ce que ça fait l'affaire ?
                                                    64x64
                                                    oznog
                                                    Date (GMT) : 2018-11-26 16:38:53 (UTC +0000)
                                                    Date local : Mon Nov 26 2018 11:45:30 GMT-0500 (heure normale d


                                                  • Bonjour, votre exemple est super surtout pour moi qui ne suit pas un développeur. J'ai réussi sur une simple page web à reproduire cette fenêtre au chargement de celle-ci et en la fermant poursuivre sur le site. J'ai un pb, le onload est intégré au body. Hors je suis en train de réaliser une application via un framework qui ne me laisse pas la main sur le code html source. Je peux uniquement charger du javascript ou du css. Ma question est comment au chargement de l'application forcer l'insertion de onload="window.location.href = '#oModal';" dans la balise body sans supprimer le contenu déjà présent. Merci
                                                    64x64
                                                    Bodet Grégory
                                                    Date (GMT) : 2019-05-01 15:06:57 (UTC +0000)
                                                    Date local : Wed May 01 2019 17:16:20 GMT+0200 (heure d’été d’E
                                                    • Salut, Il suffit d'ajouter « l'écouteur » (listener) « DOMContentLoaded » tel que décrit ici : http://www.trucsweb.com/tutoriels/javascript/jquery-equivalent/#onload document.addEventListener("DOMContentLoaded", function() { // Le code }); Bonne continuation et surtout bonne fête des Travailleurs !
                                                      64x64
                                                      oznog
                                                      Date (GMT) : 2019-05-01 15:52:41 (UTC +0000)
                                                      Date local : Wed May 01 2019 12:02:03 GMT-0400 (heure d’été de
                                                      • Bonjour, merci pour votre réponse, J'ai testé mais cela ne fonctionne pas, ci-dessous le code en question. Vous parlez de Jquery, faut-il charger cette bibliothèque avant ? Pour moi, ce n'est pas le but. Autre question dans la foulée, je dois également charger la div correspondante dans la page en javascript, une idée ? Merci <script> document.addEventListener('DOMContentLoaded', function() { window.onload="window.location.href = '#oModal'" }); </script> <body> <div id="oModal" class="oModal"> <div> <header> <a href="#none" 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> </div> </div> <a onload="'#oModal()"></a> test Mzerci
                                                        64x64
                                                        Grégory Bodet
                                                        Date (GMT) : 2019-05-02 07:09:24 (UTC +0000)
                                                        Date local : Thu May 02 2019 09:18:46 GMT+0200
                                                        • Salut, Oublie jQuery, ça n'a absolument rien à voir. Et déplace ton code JavaScript après le <body> et ça va fonctionner. Et enlève en passant le « onload » dans le lien, c'est un non-sens. Ciao
                                                          64x64
                                                          oznog
                                                          Date (GMT) : 2019-05-02 11:32:50 (UTC +0000)
                                                          Date local : Thu May 02 2019 07:42:12 GMT-0400 (heure d’été de




                                                    • Bonjour, Je suis en train de tester cette fenêtre modal. Tout marche en l'ouvrant d'un clic. Je voudrais l'ouvrir à l'ouverture de la page J'ai ajouté ce code et cela ne marche pas: <script> document.addEventListener('DOMContentLoaded', function() { window.onload="window.location.href = '#oModal'" }); </script> </head> <body onload="window.location.href = '#oModal';"> Merci de votre aide si vous pouvez me l'apporter Bien cordialement
                                                      64x64
                                                      berger
                                                      Date (GMT) : 2019-12-01 16:17:00 (UTC +0000)
                                                      Date local : Sun Dec 01 2019 17:20:42 GMT+0100 (heure normale d
                                                      • Salut, Ce code fonctionne sans aucun problème. Mais il faut éviter de copier-coller un code des commentaires qui ne fonctionne déjà pas. Surtout quand le gars prend la peine d'écrire « J'ai testé mais cela ne fonctionne pas » ;- ) 1. Pourquoi mettre des guillemets à une instruction Javascript ! window.onload="TOUT CE QU'IL Y A ENTRE GUILLEMETS EST UNE CHAINE DE CARACTÈRE"; <script> // Le bon code. document.addEventListener('DOMContentLoaded', function() { window.onload = window.location.href = '#oModal'; }); </script> 2. Pourquoi deux fois le même code ? Retire le code <body onload="window.location.href = '#oModal';"> qui ne sert strictement à rien. Ciao
                                                        64x64
                                                        oznog
                                                        Date (GMT) : 2019-12-01 16:41:30 (UTC +0000)
                                                        Date local : Sun Dec 01 2019 11:45:10 GMT-0500 (heure normale d


                                                      • bonjour, je suis vraiment novice. j'ai créé mon petit site internet, je connais un peu css et un peu html. j'ai créé mon pop up avec votre code. Il apparait bien quand j'ouvre la page web mais il disparait dans la seconde. une suggestion? merci pour votre aide :-) jeanne
                                                        64x64
                                                        jeanne
                                                        Date (GMT) : 2020-11-12 20:32:19 (UTC +0000)
                                                        Date local : Thu Nov 12 2020 21:35:41 GMT+0100 (heure normale d
                                                        • Bonjour, Non, je n'ai aucune idée. Influence d'un second script ? Un bogue dans la page ou une erreur dans votre script ? Difficile à dire. Mais j'ai écrit une dictée, j'ai eu 20 fautes d’orthographe. Une suggestion ? Pouvez-vous corriger mes erreurs ? C'est la même chose, ça peut être n'importe quoi, sans avoir accès au texte, vous ne pouvez m'aider. Pour avoir une idée, il faut avoir accès au texte comme je dois avoir accès à votre code pour vous aider. Avez-vous un URL ? Merci.
                                                          64x64
                                                          oznog
                                                          Date (GMT) : 2020-11-13 11:17:54 (UTC +0000)
                                                          Date local : Fri Nov 13 2020 06:21:16 GMT-0500 (heure normale d


                                                        • Très bel effet avec un code léger. Merci
                                                          64x64
                                                          Tommy
                                                          Date (GMT) : 2021-02-10 23:42:54 (UTC +0000)
                                                          Date local : Thu Feb 11 2021 00:47:17 GMT+0100 (heure normale d

                                                          • Bonjour, J’ai des notions assez sommaires en HTML et CSS et ne comprends rien au javascript. J’ai néanmoins réussi à adapter le code très léger de cette super fenêtre Modal sur mon site web en HTML. Je souhaitais lancer la fenêtre au chargement de la page et j’ai trouvé la solution dans les commentaires. J’aimerai aussi trouver un code permettant que la fenêtre Modal ne s’ouvre qu’une seule fois pendant la session où le visiteur consulte le site car actuellement la popup s’ouvre à chaque chargement de la page, ce qui peut s'avérer agaçant. J’ai lu tous les commentaires et n’ai rien trouvé en ce sens. Existe-il un code simple pour faire cela ? Par avance Merci pour vos retours. Bien cordialement Michel
                                                            64x64
                                                            Michel
                                                            Date (GMT) : 2022-02-21 10:24:43 (UTC +0000)
                                                            Date local : Mon Feb 21 2022 11:25:08 GMT+0100 (heure normale d
                                                            • Salut, Il va sans dire que l’utilisation du JavaScript dénature l'idée de la fenêtre « modal » en pure CSS ;- ) Or donc, vous pouvez en JavaScript sauvegarder et récupérer des données sur l'ordinateur du visiteur à l'aide du vieux fichier témoin (cookies) ou encore avec le « localStorage » mais encore mieux dans votre cas, c'est la « sessionStorage » qui dure une seule session. Et ainsi vérifier si le visiteur a déjà ouvert la fenêtre. <script> // Teste que la page est réellement chargée : document.addEventListener('DOMContentLoaded', function() { // Teste que c'est la première visite de la session : if (!sessionStorage.getItem("visite")=="1") { window.onload = window.location.href = '#oModal'; // Assigne la valeur « 1 » au « sessionStorage » sessionStorage.setItem("visite", "1"); } }); </script>
                                                              64x64
                                                              oznog
                                                              Date (GMT) : 2022-02-21 13:48:30 (UTC +0000)
                                                              Date local : Mon Feb 21 2022 08:48:28 GMT-0500 (heure normale d


                                                            Ajouter un commentaire
                                                            Votre adresse de courriel ne sera pas publiée. * L'astérisque indique les champs obligatoires.
                                                            Votre évaluation du tutoriel

                                                            9.57142857142857/10 sur 7 revues.
                                                                   Visites : 101804 - Pages vues : 108474
                                                            X

                                                            Trucsweb.com Connexion

                                                            Connexion

                                                            X

                                                            Trucsweb.com Mot de passe perdu

                                                            Connexion

                                                            X

                                                            Trucsweb.com Conditions générales

                                                            Conditions

                                                            Responsabilité

                                                            La responsabilité des Trucsweb.com ne pourra être engagée en cas de faits indépendants de sa volonté. Les informations mises à disposition sur ce site le sont uniquement à titre purement informatif et ne sauraient constituer en aucun cas un conseil ou une recommandation de quelque nature que ce soit.

                                                            Aucun contrôle n'est exercé sur les références et ressources externes, l'utilisateur reconnaît que les Trucsweb.com n'assume aucune responsabilité relative à la mise à disposition de ces ressources, et ne peut être tenue responsable quant à leur contenu.

                                                            Droit applicable et juridiction compétente

                                                            Les règles en matière de droit, applicables aux contenus et aux transmissions de données sur et autour du site, sont déterminées par la loi canadienne. En cas de litige, n'ayant pu faire l'objet d'un accord à l'amiable, seuls les tribunaux canadien sont compétents.

                                                            X

                                                            Trucsweb.com Trucsweb

                                                            X

                                                            Trucsweb.com Glossaire

                                                            X

                                                            Trucsweb.com Trucsweb

                                                            X

                                                            Trucsweb.com Trucsweb

                                                            Conditions

                                                            Aucun message!

                                                            Merci.

                                                            X
                                                            Aucun message!
                                                            X

                                                            Trucsweb.com Créer un compte

                                                            Créer un compte

                                                            .
                                                            @