I tried creating a image popup but failed badly here my script anyone can help me out

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