我嘗試創建一個圖像彈出窗口但在這里我的腳本嚴重失敗任何人都可以幫助我

Question

大家好我正在處理點擊橫幅后出現的圖像彈出窗口我嘗試了一些基本的 js 概念但失敗得很厲害。 期待幫助pps“”“

<!-- popup main -->
<div class="cover">
  <div class="contents">
    <img src="https://cdn.shopify.com/s/files/1/0605/0680/0349/files/PIGEON_a37dee29-65ce-4314-b624-e468c334fc9d.jpg?v=1664194339" alt="gh" width="100%" height="100%" />
    <a class="close" href="#">&times;</a>
  </div>
</div>
<button href="#popup_flight_travlDil3" onclick="show('cover')">kk</button>


<a class="close_flight_travelDl" href="#">&times;</a>

<script>
$(function(){
  $("button-link").click(function(){
    $(".cover").fadeIn("300");
  })
  $(".cover,.close").click(function(){
    $(".cover").fadeOut("300");
  })
  $(".contents").click(function(e){
    e.stopPropagation();
  })
})

</script>

<style> 
.cover {
  background: rgba(0, 0, 0, 0.7);
  position: fixed;
  display: none;
  opacity: 100;
  z-index: 5;
}
.contents {
  background: #fff;
  margin: 70px auto;
  border: 5px solid #ccc;
  border-radius: 30px;
  position: relative;
  z-index: 5;
  padding: 10px;
  width: 33%;
  height: 10%;
}
.close {
  position: absolute;
  top: 30px;
  right: 20px;
  transition: all 200ms;
  font-size: 95px;
  font-weight: bold;
  text-decoration: none;
  color: #000000;
}

</style>

"""

尋找用 A CLASS 鏈接或任何其他方式替換按鈕的解決方案

Answer 1

用img標簽替換按鈕並添加 eventListener 以打開或關閉彈出窗口

 let btn = document.querySelector(".btn"); let cover = document.querySelector(".cover"); let closebtn = document.querySelector(".close"); btn.addEventListener("click", () => { cover.classList.toggle("active") }) closebtn.addEventListener("click", () => { cover.classList.remove("active") })

 .cover { background: rgba(0, 0, 0, 0.7); position: fixed; display: none; opacity: 100; margin-left: 100px; z-index: 5; }.cover.active { display: block; }.contents { background: #fff; margin: 70px auto; border: 5px solid #ccc; border-radius: 30px; position: relative; z-index: 5; padding: 10px; width: 33%; height: 10%; }.close { position: absolute; top: -10px; right: 10px; transition: all 200ms; font-size: 65px; font-weight: bold; text-decoration: none; color: #000000; background-color: transparent; border: none; }

 <:-- popup main --> <div class="cover"> <div class="contents"> <img src="https.//cdn.shopify.com/s/files/1/0605/0680/0349/files/PIGEON_a37dee29-65ce-4314-b624-e468c334fc9d?jpg;v=1664194339" alt="gh" width="100%" height="100%" /> <button class="close">&times:</button> </div> </div> <img class="btn" src="https.//images.unsplash?com/photo-1657299156538-e08595d224ca.ixlib=rb-1.2.1&ixid=MnwxMjA3fDF8MHxlZGl0b3JpYWwtZmVlZHwzMXx8fGVufDB8fHx8&auto=format&fit=crop&w=500&q=60" alt "">