Question

我无法关闭叠加模式框。我尝试单击x时要删除类列表，而不是应该关闭模式框，但是js和css无法识别。首先我有一个ovarlay应该放在哪里会显示出名称和位置，之后，当用户单击箭头时，模态框将以全宽和高度弹出，这是正确的，然后我有一个X span @times，当我单击时X，我希望mdoal框消失。我尝试使用addevent监听器和所有不起作用的东西。

JS代码

const makingTheInstructorSection = (arrInst) => {
  for(let coach of arrInst) {
    $('.instructorBoxes').append
    (`
    <div class="infoPerInstructor">
      <img src="ImageGalleryPictures/instructor.jpg"/>

        <div class="firstOverlay">   
        <p class="arrowPointerInstructor">&#8594;</p> 
            <div class="text">
            <p class="arrowPointerInstructor">&#8594;</p> 
                <h3>${coach.name}</h3>
                <p>${coach.position}</p>
            </div>
        </div>

        <div class="secondOverlayOnClick">
        <span class="closeTheInstructorBox">&times;</span>   
                <h5>Why you coach:</h5>
                <p>${coach.WhyYouCoach}</p> 

                <h5>Favorite Movement:</h5>
                <p>${coach.favoriteMovement}</p> 

                <h5>Favorite Quote:</h5>
                <p>${coach.favoriteQuote}</p>    
        </div> 

    </div>
  `)
  }
}

// the code that i am trygin first,i am nto removing here
// because even here i dont get the span "x" in the console 
// when i click that x in the browser

for(let item of closing) {
  item.addEventListener("click" , (e) => {
    console.log(e.target);
  })
}

CSS代码

.instructorBoxes {
  display: grid;
  grid-template-columns: repeat(auto-fill,minmax(300px,1fr));
  grid-gap: 8px;
}

.instructorBoxes > div > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.instructorBoxes div {
  width: 100%;
  height: 100%;
}


.infoPerInstructor {
  position: relative;
  width: 50%;
}


.image {
  display: block;
  width: 100%;
  height: auto;
}

.firstOverlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  /* background-color: #008CBA; */
  background-color: #570194;
  overflow: hidden;
  width: 100%;
  height: 100%;
  transform: scale(0);
  transition: .3s ease;
  cursor: pointer;
  z-index:1;
}

.infoPerInstructor:hover .firstOverlay {
  -webkit-transform: scale(1);
  -ms-transform: scale(1);
  transform: scale(1);
}

.text {
  color: white;
  font-size: 20px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
}


.arrowPointerInstructor {
    float: right;
    font-size: 50px;
    color: white;
}


.secondOverlayOnClick  {
  display: none;
}

.activeteTheSecondOverlayOnClick {
  height: 100%;
  width: 0;
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  background-color: rgb(0,0,0);
  background-color: rgba(0,0,0, 0.9);
  overflow-x: hidden;
  transition: 0.5s;
  display: block;
}

/* .DEactiveteTheSecondOverlayOnClick {
  display: none;
} */

.activeteTheSecondOverlayOnClick p , h1 {
  padding: 8px;
  text-decoration: none;
  font-size: 36px;
  color: #818181;
  display: block;
  transition: 0.3s;
}

  .closeTheInstructorBox {
    font-size: 30px;
    color: red;
    cursor: pointer;
    float: right;
    right: 0;
    z-index: 100;
  }

Answer 1

我找到了一个答案。由于它是覆盖的，所以不起作用，最好的方法是在主体上添加事件监听器，然后检查

如果某个事件目标包含特定的类列表，则将找到该类，在整个事件中，您可以根据html上的结构搜索“模态框”并删除一些类列表等...

body.addEventListener("click" , (e) => {
  if(e.target.classList.contains("closeTheInstructorBox")) {
    console.log("x e ");
    console.log(e.target.parentElement)
    e.target.parentElement.remove("activeteTheSecondOverlayOnClick")
  }

我如何在这里关闭叠加模式框，它不起作用

1 个答案: