Remove popup when clicked outside of area-CodePudding

I have a button that I wan't to be able to close if it's clicked outside the area of the popout. I tried adding a toggle class but I am not sure if I am doing it right. I used the example from geekforgeeks. https://www.geeksforgeeks.org/how-to-toggle-an-element-class-in-javascript/

But I am getting the following error message:

Uncaught InvalidCharacterError: Failed to execute 'add' on 'DOMTokenList': The token provided ('function openPopOut() {popOut.classList.add("open");setTimeout(closePopOut, 8000); }') contains HTML space characters, which are not valid in tokens.

Any pointers on how to proceed? this is my code:

const activateBtn = document.querySelector(".activate-btn");
const html = document.querySelector("html");
const popOut = document.querySelector(".pop-out");
const popOutCloseBtn = popOut.querySelector(".pop-out__close-btn");

function openPopOut() {
  popOut.classList.add("open");
  setTimeout(closePopOut, 8000);
}

function closePopOut() {
  popOut.classList.remove("open");
}

// activateBtn.addEventListener("click", openPopOut);
activateBtn.addEventListener("click", function (e){
  activateBtn.classList.add(openPopOut);
});

popOutCloseBtn.addEventListener("click", closePopOut);

html.addEventListener("click", function (e) {
  if (e.target !== popOut) popOut.classList.remove("pop-out");
});

body {
  display: flex;
  width: 100%;
  height: 100%;
}

button {
  cursor: pointer;
}

.activate-btn {
  margin: auto;
}

.pop-out {
  position: absolute;
  bottom: 32px;
  right: 32px;
  display: flex;
  width: 175px;
  height: 100px;
  background-color: cornflowerblue;
  border: 1px solid;
  border-radius: 4px;
  transform: translateX(210px);
  transition: transform 333ms ease-out;
}

.pop-out__close-btn {
  position: absolute;
  top: 8px;
  right: 8px;
  background-color: transparent;
  font-weight: bold;
  border: none;
}

.pop-out__msg {
  margin: auto;
}

.pop-out.open {
  transform: translateX(0);
}

<html>
<button >Activate</button>

<div >
  <button >X</button>
  <h3 >Hello!</h3>
</div>
</html>

CodePudding user response：

Fixed your code.
The popup shows when you click the button, when you click outside the popup, it disappears.

const activateBtn = document.querySelector(".activate-btn");
const html = document.querySelector("html");
const popOut = document.querySelector(".pop-out");
const popOutCloseBtn = popOut.querySelector(".pop-out__close-btn");

function openPopOut() {
  popOut.classList.add("open");
  setTimeout(closePopOut, 8000);
}

function closePopOut() {
  popOut.classList.remove("open");
}

// activateBtn.addEventListener("click", openPopOut);
activateBtn.addEventListener("click", function (e){
  openPopOut();
});

popOutCloseBtn.addEventListener("click", closePopOut);

document.addEventListener("click", function (e) {
  if (e.target !== popOut && e.target !== activateBtn) closePopOut();
});

body {
  display: flex;
  width: 100%;
  height: 100%;
  overflow-x: hidden;
}

button {
  cursor: pointer;
}

.activate-btn {
  margin: auto;
}

.pop-out {
  position: absolute;
  bottom: 32px;
  right: 32px;
  display: flex;
  width: 175px;
  height: 100px;
  background-color: cornflowerblue;
  border: 1px solid;
  border-radius: 4px;
  transform: translateX(210px);
  transition: transform 333ms ease-out;
}

.pop-out__close-btn {
  position: absolute;
  top: 8px;
  right: 8px;
  background-color: transparent;
  font-weight: bold;
  border: none;
}

.pop-out__msg {
  margin: auto;
}

.pop-out.open {
  transform: translateX(0);
  display: flex;
}

<html>
<button >Activate</button>

<div >
  <button >X</button>
  <h3 >Hello!</h3>
</div>
</html>