-4

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

ryuk
  • 11
  • 5
  • you can sense my frustration through code ! provide any help if you can will work on English later on – ryuk Sep 28 '22 at 08:18
  • Doesn't matter. Don't write in full-caps. It won't get you any answers any quicker. – Cerbrus Sep 28 '22 at 08:19
  • 1
    How does your frustration add any value to the question? We spend our time to help others. Help us to help you, by asking a good question. Reading [ask] would be a good first step in that direction. – Marco Sep 28 '22 at 08:21
  • how can I edit it the post? – ryuk Sep 28 '22 at 08:21
  • 1
    Use the "edit" link under the question. Please take the [tour] (you get a badge!), have a look around, and read through the [help], in particular [*How do I ask a good question?*](/help/how-to-ask) I also recommend Jon Skeet's [Writing the Perfect Question](https://codeblog.jonskeet.uk/2010/08/29/writing-the-perfect-question/) and [Question Checklist](https://codeblog.jonskeet.uk/2012/11/24/stack-overflow-question-checklist/). – T.J. Crowder Sep 28 '22 at 08:22
  • Press the edit button. – Marco Sep 28 '22 at 08:22
  • Basically: Replace the button with a link. Ensure you prevent the default action of the link. – T.J. Crowder Sep 28 '22 at 08:23
  • This is certainly not a dupe of `preventDefault` vs `stopPropagation`... There's a mess of click handlers and identifiers that are missing. A basic "How to handle click events" dupe would've been required. – Cerbrus Sep 28 '22 at 08:25
  • @Cerbrus - It would have been much more helpful to find one and **change** the dupetarget, rather than voting to reopen. Or if you don't want to go looking, just leave it, the question should be closed, and preventDefeault **is** part of the solution here. – T.J. Crowder Sep 28 '22 at 08:34
  • I don't understand this advance concept yet . It would helpful if explain logic what should I do correct way to approach this problem – ryuk Sep 28 '22 at 08:44

1 Answers1

-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 "">
UmairFarooq
  • 1,269
  • 1
  • 3
  • 8