弹出窗口没有显示我想要的照片

Question

'Classes' 和 GetElementById 有问题？

正如你在我的 CodePen 中看到的，画廊部分中有一些照片，当你点击其中的某个照片时，会弹出一个窗口，我需要打开每个不同的照片当你点击它时弹出，以及一些关于产品的信息，在弹出的照片附近，我认为 JS 上的 Var 有问题，我必须命名照片的类来自child 1 到 child 15？

我不明白问题出在哪里

window.onload=function(){

  var selectable = document.getElementsByClassName('child');
  for(var i = 0, j = selectable.length; i < j; i++) {
    selectable[i].addEventListener("click", function() {
   document.querySelector('.bg-modal').style.display = "flex";
  });
  }


  document.querySelector('.close').addEventListener("click", function() {
   document.querySelector('.bg-modal').style.display = "none";
  });


}

@import url('https://fonts.googleapis.com/css?family=IBM+Plex+Mono');




body {
  font-family: 'IBM Plex Mono', monospace;
  background-color: #000000;
height: 100%;

}

.header{
 height: 100vh;
  color: #f1f1f1;
 display: flex;
 flex-direction: column;
 align-items: center;
 background-size: cover;
 justify-content: center;
 margin-bottom: 30px;
}

.content {
  position: fixed;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  color: #f1f1f1;
  width: 100%;
  padding: 30px;
}

.topnav {
  overflow: hidden;
  background-color: #000000;
  height: 25rem;
  align-items: center;
  align-content: center;
  text-align: center;
  margin: 2px;
}

.topnav a {
  float: center;
  display: inline-block ;
  color: #f2f2f2;
  text-align: center;
  padding: 15px 15px 15px 15px;
  text-decoration: none;
  font-size: 17px;
  margin: 3px;
}

.topnav a:hover {
  background-color: #66ff66;
  color: black;
}

#logo-container img {
   width:40%;
   height: auto;
   float: center;
}



.active {
  background-color: #4CAF50;
  color: white;
}

.topnav .icon {
  display: none;
}

@media screen and (max-width: 600px) {
  .topnav a:not(:first-child) {display: none;}
  .topnav a.icon {
    float: center;
    display: block;
  }
}

@media screen and (max-width: 600px) {
  .topnav.responsive {position: relative;}
  .topnav.responsive .icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  .topnav.responsive a {
    float: none;
    display: block;
    text-align: left;
  }
}

#Livello_1_copia{
right: 0; bottom: 10rem; top: 2rem;
min-width: 100%; min-height:100%;
width: auto; height: auto;
z-index: 100;
background: repeat;
background-size: cover;

display: block;
 position: absolute;
 pointer-events: none;
 color: whitesmoke;
}


.svg{
  fill:#ffffff;
  padding-top: 15rem;
  top: 20rem;
  height: 100%;
  z-index: 800;
}

/*OVERLAY_Box-container della galleria*/
.overlays {
  display: flex;
  flex-wrap: wrap;
  content: '';
  position: absolute;
  background: rgba(0, 0, 0, 0);
  border-radius: 5px;
  top: 25rem;
  right: 5rem;
  left: 5rem;
  align-items: center;
  margin:7%;
}

div.child:hover {
  cursor: crosshair;
}


/*Parent*/
.parent {
  display: flex;
  flex-wrap: wrap;
  top: 30rem;
  padding-top: 0rem;
  z-index: 50;


}

/*Child=Figlio del genitore= contenitore sigole foto*/
.child {
  flex: 1 0 20%; /* explanation below */
  margin: 6px;
  height: flex;
  background: rgba(0, 0, 0, 0);
  align-self: center;
  border-radius: 6px;
  margin-bottom: 50px;
}

/*Img del figlio*/
.child img {
   max-width: 100%;
   height: flex;
   margin: 0;
   bottom: 10rem;
   border-radius: 6px;
   margin-bottom: 6px;

}

.overlay p {
  font-size:1vw;
  font-weight: bold;
  color:  #00ff00;
}

.child .overlay {
margin-bottom: -40px;
background: rgb(0, 0, 0);
  background: rgba(0, 0, 0, 0.5); /* Black see-through */
  border-radius: 6px;
  color: #f1f1f1;
  height: 100%;
   width: 100%;
     transition: .30s ease;
  opacity:0;
  color: white;
  font-size: 13px;
  text-align: center;

}

#Avatar:hover .overlay {
  opacity: 1;
}

#Avatar1:hover .overlay {
  opacity: 1;
}
#Avatar2:hover .overlay {
  opacity: 1;
}
#Avatar3:hover .overlay {
  opacity: 1;
}
#Avatar4:hover .overlay {
  opacity: 1;
}
#Avatar5:hover .overlay {
  opacity: 1;
}
#Avatar6:hover .overlay {
  opacity: 1;
}
#Avatar7:hover .overlay {
  opacity: 1;
}
#Avatar8:hover .overlay {
  opacity: 1;
}
#Avatar9:hover .overlay {
  opacity: 1;
}
#Avatar10:hover .overlay {
  opacity: 1;
}
#Avatar11:hover .overlay {
  opacity: 1;
}
#Avatar12:hover .overlay {
  opacity: 1;
}
#Avatar13:hover .overlay {
  opacity: 1;
}
#Avatar14:hover .overlay {
  opacity: 1;
}
#Avatar15:hover .overlay {
  opacity: 1;
}


/*OVERBOX TESTO IMG*/
.overbox {
  background-color: #4CAF50;
  position: absolute;
  top: 2px;
  left: 0;
  right: 0;
  color: #ffffff;
  z-index: 100;
  -webkit-transition: all 300ms ease-out;
  -moz-transition: all 300ms ease-out;
  -o-transition: all 300ms ease-out;
  -ms-transition: all 300ms ease-out;
  transition: all 300ms ease-out;
  opacity: 0;
  max-width: 30vh;
  height: 24vh;
  padding: 130px 20px;
  flex: 1 0 20%; /* explanation below */
  border-radius: 6px;
  margin: 6px;
  font-size: 10px;
}

.child:hover .overbox { opacity:50; }
.child .overtext {
  -webkit-transition: all 300ms ease-out;
  -moz-transition: all 300ms ease-out;
  -o-transition: all 300ms ease-out;
  -ms-transition: all 300ms ease-out;
  transition: all 300ms ease-out;
  transform: translateY(40px);
  -webkit-transform: translateY(40px);
}

.child .title {
  font-size: 2.5em;
  text-transform: uppercase;
  opacity: 50%;
  transition-delay: 0.1s;
  transition-duration: 0.2s;
}
.child:hover .title,
.child:focus .title {
  opacity: 1;
  transform: translateY(0px);
  -webkit-transform: translateY(0px);
}

.child .tagline {
  font-size: 0.8em;
  opacity: 0;
  transition-delay: 0.2s;
  transition-duration: 0.2s;
}
.child:hover .tagline,
.child:focus .tagline {
  opacity: 1;
  transform: translateX(20px);
  -webkit-transform: translateX(0px);
}

/* - fine . OVERBOX TESTO IMG*/


#videogallery{
  top: 10rem;
}

video {
  object-fit: cover;
  width: 100vw;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  z-index: -100;
}


.footer {
   position: fixed;
   left: 0;
   bottom: 0;
   width: 100%;
   background-color:  #4CAF50;
   color: #ffffff;
   text-align: center;
   margin-top: auto;
}

.bg-modal{
  width: 100%;
 height: 100%;
  background-color: rgba(63,191,63,0.64);
  position: fixed;
  top:0;
  justify-content: center;
  align-items: center;
  display: none;
}

.modal-content {
 height: 500px;
 width: 500px;
 background-color: white;
  border-radius: 4px;
  text-align: center;
  padding: 20px;
  position: relative;

}

#fotopopup{
 width: 100%;
  }

  .close {
 position: absolute;
 top: 0;
 right: 10px;
 font-size: 42px;
 color: #333;
 transform: rotate(45deg);
 cursor: pointer;
 &:hover {
  color: #666;
 }

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>PINSTRIPE GRILLZ</title>
    <script type="text/javascript" src="gallery\js\jquery.js"></script>
    <script type="text/javascript" src="gallery\js\main.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link href="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js">
    <link rel="stylesheet" href="gallery\css/main.css">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

  </head>
  <body class="body">

    <header>
      <div class="topnav" id="myTopnav">
        <div id="logo-container"><a href="index.html"><img src="https://i.ibb.co/FgJ2BYn/PINSTRIPE-Logo-Site.png" alt="PINSTRIPE-Logo-Site" border="0">
        </div>

                  <a href="gallery.html.html">Gallery</a>
                  <a href="contact.html">Contact</a>
                  <a href="about.html">About</a>
                  <a href="javascript:void(0);" class="icon" onclick="myFunction()">

          <i class="fa fa-bars"></i>
        </a>
      </div>



    </header>

    <div class="embed-responsive embed-responsive-16by9">
      <video playsinline autoplay muted loop id="videogallery">
          <source src="gallery\img\bg_2.mp4" type="video/mp4">
      </video>
    </div>


    <div class="overlays">

      <div class="child" id="Avatar15"><img src="https://i.ibb.co/7SPJ5Jz/VL.jpg" alt="VL" border="0">
        <div class="overlay"><p>White&yellow gold snakes @maibunia</p></div>
      </div>

      <div class="child" id="Avatar14"><img src="https://i.ibb.co/7SPJ5Jz/VL.jpg" alt="VL" border="0">
        <div class="overlay"><p>@dg_bladee </p></div>
      </div>

      <div class="child" id="Avatar13"><img src="https://i.ibb.co/7SPJ5Jz/VL.jpg" alt="VL" border="0">
        <div class="overlay"><p>xxxstxr</p></div>
      </div>

      <div class="child" id="Avatar12"><img src="https://i.ibb.co/7SPJ5Jz/VL.jpg" alt="VL" border="0">
        <div class="overlay"><p>@ziskasecuris</p></div>
      </div>

      <div class="child" id="Avatar11"><img src="https://i.ibb.co/7SPJ5Jz/VL.jpg" alt="VL" border="0">
        <div class="overlay"><p>LV fangs @lui.vi</p></div>
      </div>

      <div class="child" id="Avatar10"><img src="https://i.ibb.co/7SPJ5Jz/VL.jpg" alt="VL" border="0">
        <div class="overlay"><p>@prettypukee coin</p></div>
      </div>

      <div class="child" id="Avatar9"><img src="https://i.ibb.co/7SPJ5Jz/VL.jpg" alt="VL" border="0">
        <div class="overlay"><p>Black gold biohazard @freddy.boy_bstrd</p></div>
      </div>

      <div class="child" id="Avatar8"><img src="https://i.ibb.co/7SPJ5Jz/VL.jpg" alt="VL" border="0">
        <div class="overlay"><p>Silver</p></div>
      </div>

      <div class="child" id="Avatar7"><img src="gallery\img/skll.jpg" >
        <div class="overlay"><p>10x10 cobalt chrome</p></div>
      </div>

      <div class="child" id="Avatar6"><img src="gallery\img/4.jpg" >
        <div class="overlay"><p>@dg_bladee</p></div>
      </div>

      <div class="child" id="Avatar5"><img src="gallery\img/ggvlff.jpg" >
        <div class="overlay"><p>@imran_potato</p></div>
      </div>

      <div class="child" id="Avatar4"><img src="gallery\img/spnet.jpg" >
        <div class="overlay"><p>Spiderweb</p></div>
      </div>

      <div class="child" id="Avatar3"><img src="gallery\img/Evil.jpg" >
        <div class="overlay"><p>Evil / @yungsherman95</p></div>
      </div>

      <div class="child" id="Avatar2"><img src="gallery\img/shrk.jpg" >
        <div class="overlay"><p>Razor shark teeth</p></div>
      </div>

      <div class="child" id="Avatar1"><img src="gallery\img/wirte.jpg" >
        <div class="overlay"><p>8 bottom Barbwire</p></div>
      </div>



    </div>

<div class="svg-container unclickable"  onclick="return false">
      <svg class="svg 1.1 svg-container" id="Livello_1_copia" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
    y="0px" viewBox="0 0 722.3 312.2" style="enable-background:new 0 0 722.3 312.2; transform: scale(1,-1)" xml:space="preserve">
     <g>
    <path d="M39.1,297.4c9.7,6.6,19.3,7.9,25.2,7.9c3.3,0,5.5-0.4,5.7-0.4l3.2-0.6l-3-1.3c-0.8-0.3-18.3-8.1-12.7-26.3l0.9-2.8
     l-2.4,1.6c-5.3,3.6-10.8,4.7-15.7,2.9c-4.7-1.7-8.3-5.7-9.9-11.4l-0.4,0.1c0.1-0.2,0.2-0.5,0.3-0.7c0.9-2.2,2.4-4.2,4.3-5.5
     c1-0.7,2-1.2,3.1-1.6c1.1-0.4,2.3-0.7,3.4-0.8c2.3-0.4,4.8-0.3,7.2-0.1l8.4,0.7l-7.9-2.6c-2.1-0.7-4.3-1.2-6.5-1.5
     c-2.2-0.2-4.5-0.2-6.7,0.2c-2.2,0.4-4.3,1.2-6.2,2.4c0,0,0,0,0,0V216c0,0,0,0,0,0c1.4,0.2,2.8,0.2,4.2-0.2c1.4-0.3,2.7-0.8,3.9-1.5
     c1.2-0.7,2.3-1.5,3.4-2.6l3.3-3.2l-4.4,1.6c-1.2,0.5-2.6,0.8-4,1c-1.4,0.2-2.8,0.1-4.1-0.3c-0.8-0.2-1.6-0.6-2.3-1V6.8
     c0,0-4.7,27.4-7.9,30.2L21,37.4v226C21,268.4,22.3,285.9,39.1,297.4z M23,38.3c2.6-3.2,3.4-6.6,4.3-11.5V208
     c-0.2-0.3-0.4-0.5-0.6-0.8c-0.3-0.3-0.4-0.6-0.6-0.9l-0.6-1c0.2,0.7,0.3,1.5,0.6,2.2c0.3,0.7,0.6,1.4,1.1,2v0.4h0.3
     c0.4,0.5,0.9,0.9,1.4,1.4l1,0.6c0.3,0.2,0.7,0.3,1.1,0.5c1.5,0.6,3.2,0.7,4.7,0.6c0,0,0.1,0,0.1,0c-0.9,0.5-1.8,1-2.8,1.4
     c-1.2,0.4-2.4,0.6-3.7,0.7c-1.3,0.1-2.6-0.2-3.9-0.5c0.6,0.3,1.1,0.6,1.8,0.9v43.4h0.5c-1.1,1.1-1.9,2.5-2.2,4c0.7-1.7,1.9-3,3.4-4
     h0.3v-0.2c0.2-0.1,0.3-0.2,0.5-0.3c1.8-1,3.9-1.5,5.9-1.7c1.5-0.2,3.1-0.2,4.7-0.1c-1.2,0.2-2.3,0.6-3.5,1c-1.2,0.5-2.4,1.2-3.4,2
     c-2.1,1.7-3.5,4-4.3,6.5c-0.1,0.5-0.2,0.9-0.3,1.4l-0.5,0.1c0.1,0.3,0.2,0.7,0.3,1c-0.2,1.7-0.2,3.4,0.1,5c0-1.3,0.1-2.5,0.4-3.8
     c2.1,5.1,5.8,8.9,10.4,10.5c4.5,1.6,9.6,1.1,14.4-1.4l-2.1,2.9l-1.3,0.9c-7.6,5.8-18.1-0.1-18.2-0.2l-3.6-2l2.3,3.5
     c8.7,13.4,24.5,16.6,25.1,16.7l4.3,0.8L57,299c-0.3-0.2-6.9-5.3-4.8-15.2l0.2-1l2.2-3.1c-2.1,12.9,7,20.4,11.8,23.5
     c-5.1,0.3-15.7-0.2-26.3-7.4c-16-10.9-17.2-27.6-17.2-32.4V38.3z M53.2,297.8c-4.5-1.5-12.4-4.9-18.2-11.9c3.7,1.3,9.6,2.5,15-0.3
     C49.4,291.3,51.4,295.4,53.2,297.8z"/>
   </g>
  </svg>

  <svg class="svg 1.1 svg-container" id="Livello_1_copia" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
 y="0px" viewBox="0 0 722.3 312.2" style="enable-background:new 0 0 722.3 312.2;transform: scale(-1,-1)" xml:space="preserve">
 <g>
  <path d="M39.1,297.4c9.7,6.6,19.3,7.9,25.2,7.9c3.3,0,5.5-0.4,5.7-0.4l3.2-0.6l-3-1.3c-0.8-0.3-18.3-8.1-12.7-26.3l0.9-2.8
   l-2.4,1.6c-5.3,3.6-10.8,4.7-15.7,2.9c-4.7-1.7-8.3-5.7-9.9-11.4l-0.4,0.1c0.1-0.2,0.2-0.5,0.3-0.7c0.9-2.2,2.4-4.2,4.3-5.5
   c1-0.7,2-1.2,3.1-1.6c1.1-0.4,2.3-0.7,3.4-0.8c2.3-0.4,4.8-0.3,7.2-0.1l8.4,0.7l-7.9-2.6c-2.1-0.7-4.3-1.2-6.5-1.5
   c-2.2-0.2-4.5-0.2-6.7,0.2c-2.2,0.4-4.3,1.2-6.2,2.4c0,0,0,0,0,0V216c0,0,0,0,0,0c1.4,0.2,2.8,0.2,4.2-0.2c1.4-0.3,2.7-0.8,3.9-1.5
   c1.2-0.7,2.3-1.5,3.4-2.6l3.3-3.2l-4.4,1.6c-1.2,0.5-2.6,0.8-4,1c-1.4,0.2-2.8,0.1-4.1-0.3c-0.8-0.2-1.6-0.6-2.3-1V6.8
   c0,0-4.7,27.4-7.9,30.2L21,37.4v226C21,268.4,22.3,285.9,39.1,297.4z M23,38.3c2.6-3.2,3.4-6.6,4.3-11.5V208
   c-0.2-0.3-0.4-0.5-0.6-0.8c-0.3-0.3-0.4-0.6-0.6-0.9l-0.6-1c0.2,0.7,0.3,1.5,0.6,2.2c0.3,0.7,0.6,1.4,1.1,2v0.4h0.3
   c0.4,0.5,0.9,0.9,1.4,1.4l1,0.6c0.3,0.2,0.7,0.3,1.1,0.5c1.5,0.6,3.2,0.7,4.7,0.6c0,0,0.1,0,0.1,0c-0.9,0.5-1.8,1-2.8,1.4
   c-1.2,0.4-2.4,0.6-3.7,0.7c-1.3,0.1-2.6-0.2-3.9-0.5c0.6,0.3,1.1,0.6,1.8,0.9v43.4h0.5c-1.1,1.1-1.9,2.5-2.2,4c0.7-1.7,1.9-3,3.4-4
   h0.3v-0.2c0.2-0.1,0.3-0.2,0.5-0.3c1.8-1,3.9-1.5,5.9-1.7c1.5-0.2,3.1-0.2,4.7-0.1c-1.2,0.2-2.3,0.6-3.5,1c-1.2,0.5-2.4,1.2-3.4,2
   c-2.1,1.7-3.5,4-4.3,6.5c-0.1,0.5-0.2,0.9-0.3,1.4l-0.5,0.1c0.1,0.3,0.2,0.7,0.3,1c-0.2,1.7-0.2,3.4,0.1,5c0-1.3,0.1-2.5,0.4-3.8
   c2.1,5.1,5.8,8.9,10.4,10.5c4.5,1.6,9.6,1.1,14.4-1.4l-2.1,2.9l-1.3,0.9c-7.6,5.8-18.1-0.1-18.2-0.2l-3.6-2l2.3,3.5
   c8.7,13.4,24.5,16.6,25.1,16.7l4.3,0.8L57,299c-0.3-0.2-6.9-5.3-4.8-15.2l0.2-1l2.2-3.1c-2.1,12.9,7,20.4,11.8,23.5
   c-5.1,0.3-15.7-0.2-26.3-7.4c-16-10.9-17.2-27.6-17.2-32.4V38.3z M53.2,297.8c-4.5-1.5-12.4-4.9-18.2-11.9c3.7,1.3,9.6,2.5,15-0.3
   C49.4,291.3,51.4,295.4,53.2,297.8z"/>
 </g>
</svg>

</div>


<div class="footer">
  <p>© PinStripe Custom Jewelery .</p>
</div>

    <script>
    function myFunction() {
      var x = document.getElementById("myTopnav");
      if (x.className === "topnav") {
        x.className += " responsive";
      } else {
        x.className = "topnav";
      }
    }
    </script>

<!-- Modal Section -->

<div class="bg-modal">
 <div class="modal-content">
   <div class="close">+</div>
   <img src="" alt="" id="fotopopup">
 </div>
</div>

  </body>
</html>

Answer 1

您可以从点击的元素中检索图像并将其作为元素的 src 传递到弹出窗口中，如下所示：

window.onload=function(){

  var selectable = document.getElementsByClassName('child');
  for(var i = 0, j = selectable.length; i < j; i++) {
    selectable[i].addEventListener("click", function(e) {

      document.getElementById('fotopopup').setAttribute('src', e.target.attributes['src'].value);
      document.querySelector('#text-block').innerHTML = e.target.nextElementSibling.innerHTML;
    document.querySelector('.bg-modal').style.display = "flex";
  });
  }


  document.querySelector('.close').addEventListener("click", function() {
    document.querySelector('.bg-modal').style.display = "none";
  });


}

HTML 模态

<div class="bg-modal">
 <div class="modal-content">
   <div class="close">+</div>
   <img src="" alt="" id="fotopopup">

   <span id="text-block"></span>
 </div>
</div>

Live demo

弹出窗口没有显示我想要的照片

Pop up doesn't show me the photo I want

html

javascript

var

getelementbyid

modalpopup