我尝试创建一个图像弹出窗口但在这里我的脚本严重失败任何人都可以帮助我

Question

hello all I am working on image popup that appears after clicking on banner I tried some basic js concept but failed badly. looking forward HELP 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>

"""

LOOKING FOR SOLUTION THAT REPLACE BUTTON WITH THE A CLASS LINK OR ANYOTHER WAY ROUND

Answer 1

replacing button with an img tag and adding eventListener to open or close the popup

 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 "">