Click Modal

Maxime -
Maxime - 16 janv. 2019 à 11:54

Bonjour,
Je cherche a savoir comment faire pour que lorsque je click sur une image sa ouvre une modal (deja fait) et lorsque je click à l'interrieur de ma modal le click ferme ma modal
Merci de votre reponse !

Configuration: Windows / Chrome 71.0.3578.98

Afficher la suite

3 réponses

Réponse 1 / 3
jordane45 Messages postés 30426 Date d'inscription Statut Modérateur Dernière intervention 4 830

Bonjour,

Ben... ça dépend comment tu as codé ta modal ...
Un plugin tout fait ? Un code trouvé sur internet ? Lequel ?? )
0
1. jordane45 Messages postés 30426 Date d'inscription Statut Modérateur Dernière intervention 4 830
  
  NB: Pour poster du code sur le forum, merci de le faire en utilisant LES BALISES DE CODE (et en y précisant le langage)
  Explications disponibles ici : https://codes-sources.commentcamarche.net/faq/11288-les-balises-de-code
  
  0

Maxime

<!DOCTYPE [/html/htmlintro.php3 html]>
<[/html/htmlintro.php3 html]>
<head>
 <title>Mosaique</title>
 <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
  <link href="styles/styles.css" rel="stylesheet" type="text/css">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <meta http-equiv="refresh" content="; url="mapage.php" />
  <script src="javascript/script.js"></script>
</head>
 


                                      <!-- LES CHANNELS -->

<body>
   <div class="wrapper">
    <div id="channel-viceland" class="[/contents/391-fichier-img img]-wrapper">
     <img id="channel-viceland-img" class="video" src="./images-et-vidéo/viceland.jpg" onload="this.onload=null; this.src=getImages('viceland');"  
      onclick="onClick(this)" class="w3-hover-opacity">
      <span class="text">VICELAND</span>
    </div>
    <div id="channel-rmc-sport" class="img-wrapper">
     <img id="channel-rmc-sport-img" class="video" src="./images-et-vidéo/rmc-sport.jpg" onload="this.onload=null; this.src=getImages('rmc-sport');"  
      onclick="onClick(this)" class="w3-hover-opacity">
      <span class="text">RMC SPORT</span>
    </div>
    <div id="channel-lci" class="img-wrapper">
     <img id="channel-lci-img" class="video" src="./images-et-vidéo/lci.jpg" onload="this.onload=null; this.src=getImages('lci');"
      onclick="onClick(this)" class="w3-hover-opacity">
      <span class="text">LCI</span>
    </div>
    <div id="channel-vision tv" class="img-wrapper">
     <img id="channel-vision-tv-img" class="video" src="./images-et-vidéo/vision-tv.jpg" onload="this.onload=null; this.src=getImages('vision-tv');" 
      onclick="onClick(this)" class="w3-hover-opacity">
      <span class="text">VISION TV</span>
    </div>
    <div id="channel-loutre tv" class="img-wrapper">
     <img id="channel-loutre-img" class="video" src="./images-et-vidéo/loutre-tv.jpg" onload="this.onload=null; this.src=getImages('loutre-tv');" 
      onclick="onClick(this)" class="w3-hover-opacity">
      <span class="text">LOUTRE TV</span>
    </div>
    <div id="channel-farming" class="img-wrapper">
     <img id="channel-farming-img" class="video" src="./images-et-vidéo/farming.jpg" onload="this.onload=null; this.src=getImages('farming');" 
      onclick="onClick(this)" class="w3-hover-opacity">
      <span class="text">FARMING</span>
    </div>
    <div id="channel-nrj12" class="img-wrapper">
     <img id="channel-nrj12-img" class="video" src="./images-et-vidéo/nrj12.jpg" onload="this.onload=null; this.src=getImages('nrj12');" 
      onclick="onClick(this)" class="w3-hover-opacity">
      <span class="text">NRJ12</span>
    </div>
    <div id="channel-arte" class="img-wrapper">
     <img id="channel-arte-img" class="video" src="./images-et-vidéo/arte.jpg" onload="this.onload=null; this.src=getImages('arte');" 
      onclick="onClick(this)" class="w3-hover-opacity">
      <span class="text">ARTE</span>
    </div>
    <div id="channel-bein sport" class="img-wrapper">
     <img id="channel-bein-sport-img" class="video" src="./images-et-vidéo/bein-sport.jpg" onload="this.onload=null; this.src=getImages('bein-sport');" 
      onclick="onClick(this)" class="w3-hover-opacity">
      <span class="text">BEIN SPORT</span>
    </div>
    <div id="channel-lbc" class="img-wrapper">
     <img id="channel-lbc-img" class="video" src="./images-et-vidéo/lbc.jpg" onload="this.onload=null; this.src=getImages('lbc');" 
      onclick="onClick(this)" class="w3-hover-opacity">
      <span class="text">LBC</span>
    </div>
    <div id="channel-bfm" class="img-wrapper">
     <img id="channel-bfm-img" class="video" src="./images-et-vidéo/bfm.jpg" onload="this.onload=null; this.src=getImages('bfm');" 
      onclick="onClick(this)" class="w3-hover-opacity">
      <span class="text">BFM</span>
    </div>
    <div id="channel-paysage tv" class="img-wrapper">
     <img id="channel-paysage tv-img" class="video" src="./images-et-vidéo/paysage-tv.jpg" onload="this.onload=null; this.src=getImages('paysage-tv');" 
      onclick="onClick(this)" class="w3-hover-opacity">
      <span class="text">PAYSAGE TV</span>
    </div>
    <div id="channel-tf1" class="img-wrapper">
     <img id="channel-tf1-img" class="video" src="./images-et-vidéo/tf1.jpg" onload="this.onload=null; this.src=getImages('tf1');" 
      onclick="onClick(this)" class="w3-hover-opacity">
      <span class="text">TF1</span>
    </div>
    <div id="channel-turbo" class="img-wrapper">
     <img id="channel-turbo-img" class="video" src="./images-et-vidéo/turbo.jpg" onload="this.onload=null; this.src=getImages('turbo');" 
      onclick="onClick(this)" class="w3-hover-opacity">
      <span class="text">TURBO</span>
    </div>
    <div id="channel-telefoot" class="img-wrapper">
     <img id="channel-telefoot-img" class="video" src="./images-et-vidéo/telefoot.jpg" onload="this.onload=null; this.src=getImages('telefoot');" 
      onclick="onClick(this)" class="w3-hover-opacity">
      <span class="text">TELEFOOT</span>
    </div>
    <div id="channel-canadian" class="img-wrapper">
     <img id="channel-canadian-img" class="video" src="./images-et-vidéo/canadian.jpg" onload="this.onload=null; this.src=getImages('canadian');" 
      onclick="onClick(this)" class="w3-hover-opacity">
      <span class="text">CANADIAN</span>
    </div>
    <div id="channel-mountain-tv" class="img-wrapper">
     <img id="channel-mountain tv-img" class="video" src="./images-et-vidéo/mountain-tv.jpg" onload="this.onload=null; this.src=getImages('mountain-tv');" 
      onclick="onClick(this)" class="w3-hover-opacity">
      <span class="text">MOUNTAIN TV</span>
    </div>
    <div id="channel-ldc-news" class="img-wrapper">
     <img id="channel-ldc-news-img" class="video" src="./images-et-vidéo/ldc-news.jpg" onload="this.onload=null; this.src=getImages('ldc-news');" 
      onclick="onClick(this)" class="w3-hover-opacity">
      <span class="text">LDC NEWS</span>
    </div>
    <div id="channel-sky-sport" class="img-wrapper">
     <img id="channel-sky sport-img" class="video" src="./images-et-vidéo/sky-sport.jpg" onload="this.onload=null; this.src=getImages('sky-sport');" 
      onclick="onClick(this)" class="w3-hover-opacity">
      <span class="text">SKY SPORT</span>
    </div>
    <div id="channel-lake-tv" class="img-wrapper">
     <img id="channel-lake tv-img" class="video" src="./images-et-vidéo/lake-tv.jpg" onload="this.onload=null; this.src=getImages('lake-tv');"
        onclick="onClick(this)" class="w3-hover-opacity">
      <span class="text">LAKE TV</span>
    </div>

                                            <!-- LE MODAL -->
  
  <div id="modal01" class="w3-modal">
   <span class="w3-button w3-hover-red w3-xlarge w3-display-topright" onclick="modal01.style.display='none'">×</span>
     <div id="videoid" class="w3-modal-content w3-animate-zoom">
       <video id="video" controls loop="0">
          <source src="./images-et-vidéo/video45.mp4" class="video">
      </video>
      </div>
  </div> 
 </div>
</body>
</html>


* {
box-sizing: border-box;
}
html, body{
padding:0;
margin:0;
width: 100%;
}
                                                    /* --TOUTE LA PARTIE CSS-- */
.wrapper {
display:grid;
grid-template-columns: 0fr 0fr 0fr 0fr; 
}
#video {
display:block;
width: 100%;
}
.img-wrapper {
position:relative;
}
.text {
color: white;
text-shadow: black 0.1em 0.1em 0.2em;
text-align:center;
display: block;
position:absolute;
left: 5%;
bottom: 72%;
font-size: 225%;
font-family: fantasy;
letter-spacing: 5px;
}

.w3-modal {
width: 100%;
padding-top: 10%;

}
.w3 {
display: block;
}
.video {
width: 475.75px;
cursor: zoom-in;
height: 251px;
}

          

                                                        /*-- LE RESPONSIVE-- */

@media all and (min-width:3412px) {
.wrapper {
grid-template-columns: repeat(6, 0fr);
}
}
@media all and (min-width:2864px) {
.wrapper {
grid-template-columns: repeat(5, 0fr);
}
}
@media all and (min-width:2393px) {
.wrapper {
grid-template-columns: repeat(6, 0fr);
}
}
@media all and (max-width:3426px) {
.wrapper {
grid-template-columns: 0fr 0fr 0fr 0fr 0fr 0fr;
}
}
@media all and (max-width:2835px) {
.wrapper {
grid-template-columns: 0fr 0fr 0fr 0fr 0fr;
}
}
@media all and (max-width:2358px) {
.wrapper {
grid-template-columns: 0fr 0fr 0fr 0fr;
}
}
@media all and (max-width:1915px) {
.wrapper {
grid-template-columns: 0fr 0fr 0fr; 
}
}
@media all and (max-width:1438px) {
.wrapper {          
grid-template-columns: 0fr 0fr; 
}
}
@media all and (max-width:964px) {
.wrapper {
grid-template-columns: 0fr; 
}
}

jordane45 Messages postés 30426 Date d'inscription Statut Modérateur Dernière intervention 4 830

Tu n'as pas vu mon second message concernant l'utilisation des balises de code ??
Je vais éditer ton message pour les mettre !
La prochaine fois, merci de faire l'effort.
0
1. Maxime > jordane45 Messages postés 30426 Date d'inscription Statut Modérateur Dernière intervention
  
  Escuse-moi j'ai pas vu ton message merci de l'info
  
  0
jordane45 Messages postés 30426 Date d'inscription Statut Modérateur Dernière intervention 4 830

Et peux tu nous poster ce que tu as dans ton fichier javascript/script.js
Merci
0
1. Maxime > jordane45 Messages postés 30426 Date d'inscription Statut Modérateur Dernière intervention
  
  c est deja fait
  
  0

Réponse 3 / 3
Maxime
```
function onClick(element) {
     document.getElementById("videoid").src = element.src;
     document.getElementById("modal01").style.display = "block";
  }
```
EDIT : Correction des balises de code.
Il faut placer le code ENTRE les balises.... pas après. :-)
0
1. jordane45 Messages postés 30426 Date d'inscription Statut Modérateur Dernière intervention 4 830
  
  Et les balises de code ??
  
  J'édite encore ce message....
  
  0
2. Maxime > jordane45 Messages postés 30426 Date d'inscription Statut Modérateur Dernière intervention
  
  Non c'est bon je les ai fait
  
  0
3. jordane45 Messages postés 30426 Date d'inscription Statut Modérateur Dernière intervention 4 830
  
  Donc,
  dans ton JS
  
  function closeModal() { document.getElementById("modal01").style.display = "none"; }
  
  Dans ton html
  <span class="w3-button w3-hover-red w3-xlarge w3-display-topright" onclick="closeModal();">×</span>
  
  0
4. Maxime
  
  ça n'a aucun effet ?
  
  0
5. jordane45 Messages postés 30426 Date d'inscription Statut Modérateur Dernière intervention 4 830
  
  Ca fonctionne parfaitement.
  Par contre :
  1 - Charge ton JS à la fin de ta page (juste avant le </body> ) et non pas dans le head.
  2 - Vide le cache de ton navigateur.
  
  0

Click Modal

3 réponses

Discussions similaires

Newsletters