0

I know my issue is event propagation related, but I can't manage to figure it out. The code I attached is a loop on the page with a couple of items.

function popItUp() {
  document.querySelector(".popuptext").classList.add("show");
  document.querySelector("body").style.overflow = "hidden";
}


function popItDown() {
  document.querySelector(".popuptext.show").classList.remove("show");
  document.querySelector("body").style.overflow = "visible";
}

function cancelBubble(e) {
  var evt = e ? e : window.event;
  if (evt.stopPropagation) evt.stopPropagation();
  if (evt.cancelBubble != null) evt.cancelBubble = true;
}

// define all popup elements.
let popups = document.querySelectorAll(".popup");
let popuptext = document.querySelector(".popuptext");


// add listener to each popup element, which binds handler function to click event.
popups.forEach((popup) => popup.addEventListener("click", popItUp));
.popup .popuptext {
  visibility: hidden;
  width: 160px;
  background-color: #555;
  color: #fff;
  text-align: center;
  border-radius: 20px;
  padding: 8px 0;
  z-index: 1;
}

.popup .popuptext.show::before {
  content: "";
  position: fixed;
  top: -10%;
  left: 0%;
  width: 100%;
  height: 200%;
  background-color: rgba(0, 0, 0, 0.4);
  /* Black w/opacity/see-through */
  z-index: -50;
  border-color: #555 transparent transparent transparent;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.popup .popuptext::after {
  content: "";
  position: fixed;
}

.popuptext.show {
  visibility: visible;
  -webkit-animation: fadeIn 1s;
  animation: fadeIn 1s;
  position: fixed;
  top: 15%;
  left: 11%;
  justify-content: center;
  display: block;
  width: 75%;
  height: 80%;
  overflow-y: auto;
  overflow-x: auto;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
  <div class="popup popup--maxwidth" onclick="popItUp()">
    CLICK ME FOR POPUP
    <div class="popup--container" onclick="cancelBubble()">
      <span class="popuptext">
                    <span class="popup--close" onclick="popItDown()"><i class="fa fa-close" style="font-size:36px; color:white;">CLOSEBUTTON</i></span>
      <div class="partner-container">
        Awesome Content
      </div>
    </div>
  </div>
</div>

So this kind of works. Clicking on popItUp() opens up the popup, clicking on popItUp() closes it up.

Issue 1: ISSUE FIXED

However, it is quite unseemly, as every time I open it up, I get an error of:

Popup.js?ver=1.0:4 Uncaught TypeError: this.querySelector is not a function
    at popItUp (Popup.js?ver=1.0:4)
    at HTMLDivElement.onclick (hu:663)

Issue 2:

It is a clients request, that if we click outside of the popups container (so the target of the click in this case would be .popup--maxwidth, as it covers the whole body), then the popup should close up as well. Now the problem is, that if I take out cancelBubble(e) this sort of works, but it also closes up the popup if i click anywhere inside the popup, which is not really helpful. :)

If someone can help me out it would be greatly appreciated.

Issue 1: ISSUE FIXED -- was a typo in popItUp(), used this.querySelector instead of document. Code updated.

Pbalazs89
  • 170
  • 12

0 Answers0