我如何在這里關閉我的覆蓋模式框，它不起作用

Question

我無法關閉我的覆蓋模式框。我嘗試當 x 被點擊而不是刪除類列表時，模式框應該關閉，但它不能被 js 和 css 識別。首先我有一個 ovarlay 應該顯示coas 的名稱和位置，之后當用戶單擊箭頭時，模態框以全寬和全高彈出，這是正確的，之后我有一個 X 跨度 @times，當我單擊 X i想讓 mdoal 框消失。我嘗試使用 addevent 偵聽器，但一切都不起作用。

代碼

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

我找到了一個答案。因為它是覆蓋它不起作用，最好的方法是在 body 上添加事件偵聽器，然后檢查

如果某個事件目標包含該特定的類列表，那么它將被找到，並且通過該事件，您可以根據 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")
  }