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, animation

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 (http://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

    2015-02-08 0:9:37
    • 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

      2015-03-07 2:31:18


    • 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
      http://www.cpcp.ch
      2015-02-21 16:12:38

      • Merci !! Très bon script !!
        64x64
        Sylvain

        2015-03-04 9:15:30

        • 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

          2015-03-27 9:52:47
          • 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
            http://www.trucsweb.com
            2015-03-27 12:40:25


          • 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

            2015-04-02 12:25:49
            • 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
              http://www.trucsweb.com
              2015-04-02 14:14:21


            • 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

              2015-05-04 13:48:34
              • 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
                http://www.trucsweb.com
                2015-05-04 14:51:2
                • 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

                  2015-05-04 16:39:53
                  • 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
                    http://www.trucsweb.com
                    2015-05-04 17:4:15




              • 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

                2015-05-05 14:39:42
                • 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
                  http://www.trucsweb.com
                  2015-05-05 15:6:2


                • 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

                  2015-07-15 9:0:48

                  • (suite du précédent commentaire) Diantre, quelqu'un a posé la question pour le scroll. Désolé :-).
                    64x64
                    Pyraah

                    2015-09-05 6:30:19

                    • 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

                      2015-10-21 12:27:24
                      • 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
                        http://www.trucsweb.com
                        2015-10-21 12:52:47


                      • 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

                        2015-11-09 5:30:8

                      • À mon avis, il manque un / ligne 90, non ? Excellent script ^_^ Enfin, je vais pouvoir me passer de Jquery/Colorbox !
                        64x64
                        Nicolas

                        2015-12-24 17:15:55
                        • 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
                          http://www.trucsweb.com
                          2016-01-04 14:58:19


                        • 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

                          2016-03-07 16:33:22

                          • 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
                            http://www.pasapas.be
                            2016-03-11 9:5:11

                            • 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
                              http://www.parolier.be
                              2016-03-15 7:30:48
                              • 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
                                http://www.trucsweb.com
                                2016-03-15 12:18:42
                                • 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
                                  http://www.parolier.be
                                  2016-03-15 14:49:17



                              • 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
                                http://www.parolier.be
                                2016-03-15 15:17:6
                                • 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
                                  http://www.trucsweb.com
                                  2016-03-15 17:1:55


                                • pour fermer la fenêtre avec une vidéo comment peut on faire ?
                                  64x64
                                  PETITPAS

                                  2016-04-24 18:44:10
                                  • 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
                                    http://www.trucsweb.com
                                    2016-04-25 12:12:16


                                  • 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

                                    2016-05-10 10:29:0
                                    • 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
                                      http://www.trucsweb.com
                                      2016-05-10 11:31:49
                                      • 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
                                        http://www.trucsweb.com
                                        2016-05-10 11:42:32



                                    10/10 sur 1 revues.
                                           Visites : 40124 - Pages vues : 43884
                                    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

                                    .
                                    @