Html Question posted in
Some basic documentation can be found here.

Html – Trying to add a popup to a website page but the javascript isn't making the popup disappear on click

I am trying to add a popup box to a website page that prompts users to click a button to access the rest of the site. The idea is that when they click the button in the popup box the entire popup becomes invisible and unable to interact with.

I tried to accomplish this by adding a .click css property that would make the popup opacity 0 and then adding the .click with the javascript. Genuinely not sure whats wrong so any help appreciated

let popup = document.querySelector('.popup');
let close_button = document.querySelector('.close_button');
close_button.onclick = function() {
  popup.classList.add('.click');
}
.popup {
  display: flex;
  align-items: center;
  justify-content: center;
  transition: 0.2s;
}

.popup .click {
  opacity: 0;
  pointer-events: none;
}

.warning {
  display: flex;
  flex-direction: column;
  background-color: blue;
  padding: 1vh;
  margin-top: 5vh;
}

.heading {
  font-size: 60px;
  color: azure;
  padding-bottom: 1vh;
}

.message-box {
  background-color: azure;
  padding: 1vh;
}

.message {
  font-size: 24px;
  padding-bottom: 1vh;
}

.button-box {
  display: flex;
  align-items: center;
  justify-content: center;
}

.close_button {
  font-size: 24px;
  background-color: blue;
  color: azure;
  border: 0px;
  padding: 1vh;
  border-radius: 5px;
  transition: opacity 0.3s;
}

.close_button:hover {
  opacity: 0.7;
}

.close_button:active {
  opacity: 1;
}
<div class="popup">
  <div class="warning">
    <div class="heading">Warning</div>
    <div class="message-box">
      <div class="message">This website contains mature content not suited for minors</div>
      <div class="button-box">
        <button class="close_button" type="button">I am 18+</button>
      </div>
    </div>
  </div>
</div>
Tags:

2

Answers


  1. 0

    1. The line popup.classList.add('.click'); is incorrect. It should be popup.classList.add('click');

    2. Update the CSS selector to .popup.click to align the class addition and selector targeting.

    let popup = document.querySelector('.popup');
let close_button = document.querySelector('.close_button');
close_button.onclick = function() {
  popup.classList.add('click');
}
    .popup {
  display: flex;
  align-items: center;
  justify-content: center;
  transition: 0.2s;
}

.popup.click {
  opacity: 0;
  pointer-events: none;
}

.warning {
  display: flex;
  flex-direction: column;
  background-color: blue;
  padding: 1vh;
  margin-top: 5vh;
}

.heading {
  font-size: 60px;
  color: azure;
  padding-bottom: 1vh;
}

.message-box {
  background-color: azure;
  padding: 1vh;
}

.message {
  font-size: 24px;
  padding-bottom: 1vh;
}

.button-box {
  display: flex;
  align-items: center;
  justify-content: center;
}

.close_button {
  font-size: 24px;
  background-color: blue;
  color: azure;
  border: 0px;
  padding: 1vh;
  border-radius: 5px;
  transition: opacity 0.3s;
}

.close_button:hover {
  opacity: 0.7;
}

.close_button:active {
  opacity: 1;
}
    <div class="popup">
  <div class="warning">
    <div class="heading">Warning</div>
    <div class="message-box">
      <div class="message">This website contains mature content not suited for minors</div>
      <div class="button-box">
        <button class="close_button" type="button">I am 18+</button>
      </div>
    </div>
  </div>
</div>
    Login or Signup to reply.
  2. 0

    Might as well use a <dialog>. I added another <button> for users that are under 18, which will make the browser jump back to the previous page (this feature will not work in the Snippet). Details are commented in the example below.

    // Reference the <dialog> and the 2 <button>s
const popup = document.querySelector(".popup");
const exit = document.querySelector(".exit");
const close = document.querySelector(".close");

// Start with <dialog> open.
popup.showModal();

/*
  Register <button class="exit"> to listen for the "click" event.
  When invoked, the browser will jump back to the previous page.
  This feature will not work from this Snippet.
*/
exit.addEventListener("click", function(e) {
  history.back();
});

/*
  Register <button class="close"> to listen for the "click" event.
  When invoked, the <dialog> will close.
*/
close.addEventListener("click", function(e) {
  popup.close();
});
    :root {
  font: 3vmin/1 "Segoe UI";
}

main {
  width: 100%;
}

/*
  The following styles animate the <dialog>
  https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dialog#animating_dialogs
*/
/* BEGIN */
.popup {
  border: 0;
  background: rgb(0 0 0 / 0%);
  opacity: 0;
  transform: scaleY(0);
  transition: 0.7s allow-discrete;
}

.popup[open] {
  opacity: 1;
  transform: scaleY(1);
}

@starting-style {
  .popup[open] {
    opacity: 0;
    transform: scaleY(0);
  }
}

.popup::backdrop {
  background: rgb(0 0 0 / 0%);
  transition: 0.7s allow-discrete;
}

.popup[open]::backdrop {
  background: rgb(0 0 0 / 50%);
}

@starting-style {
  .popup[open]::backdrop {
  background: rgb(0 0 0 / 50%);
  }
}
/* END */

.warning {
  margin-top: 10vh;
  padding: 0.25rem;
  border-radius: 8px;
  background: blue;
}

header {
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
  padding: 0.25rem 1rem 0;
}

h4 {
  margin: 0;
  font-weight: 500;
  font-size: 4rem;
  color: white
}

.content {
  border-bottom-left-radius: 8px;
  border-bottom-right-radius: 8px;
  background: white;
}

.message {
  padding: 1rem 1rem 0;
  font-size: 2rem;
}

footer {
  display: flex;
  justify-content: center;
  align-items: center;
  padding-bottom: 1.5rem;
  border-radius: 8px;
  background: white;
}

button {
  display: inline-block;
  width: 11ch;
  padding: 0.2rem 0.5rem 0.4rem;
  border-color: transparent;
  outline: none;
  font: inherit;
  font-size: 2rem;
  color: white;
  background: blue;
}

button:hover {
  opacity: 0.7;
  cursor: pointer;
}

button:active {
  opacity: 1;
}

.exit {
  border-color: blue;
  border-bottom-right-radius: 0;
  border-top-right-radius: 0;
  border-bottom-left-radius: 8px;
  border-top-left-radius: 8px;
  border-right: 1.5px inset #bbb;
  color: blue;
  background: white;
}

.close {
  border-bottom-left-radius: 0;
  border-top-left-radius: 0;
  border-bottom-right-radius: 8px;
  border-top-right-radius: 8px;
  border-left: 1.5px inset #bbb;
}
    <dialog class="popup">
  <section class="warning">
    <header>
      <h4>Warning</h4>
    </header>
    <section class="content">
      <p class="message">This website contains mature content not suited for minors.</p>
      <footer>
        <button class="exit">Under 18</button>
        <button class="close">Over 17đź‘Ť</button>
      </footer>
    </section>
  </section>
</dialog>

<main>
  <p>Let’s burn that lab to the ground. Friends don't lie. Nancy, seriously, you're gonna be so cool now, it's ridiculous. You're an idiot, Steve Harrington. You're beautiful, Nancy Wheeler.</p>
  <p> Friends don't lie. Nancy, seriously, you're gonna be so cool now, it's ridiculous. You're an idiot, Steve Harrington. You're beautiful, Nancy Wheeler. We never would've upset you if we knew you had superpowers.</p>
  <p> Nancy, seriously, you're gonna be so cool now, it's ridiculous. You're an idiot, Steve Harrington. You're beautiful, Nancy Wheeler. We never would've upset you if we knew you had superpowers. We never would've upset you if we knew you had superpowers.</p>
  <p> You're an idiot, Steve Harrington. You're beautiful, Nancy Wheeler. We never would've upset you if we knew you had superpowers. We never would've upset you if we knew you had superpowers. You’re going to be home by 8, listening to the Talking Heads
    and reading Vonnegut or something.</p>
  <p> You're beautiful, Nancy Wheeler. We never would've upset you if we knew you had superpowers. We never would've upset you if we knew you had superpowers. You’re going to be home by 8, listening to the Talking Heads and reading Vonnegut or something.
    That sounds like a nice night.</p>
  <p> We never would've upset you if we knew you had superpowers. We never would've upset you if we knew you had superpowers. You’re going to be home by 8, listening to the Talking Heads and reading Vonnegut or something. That sounds like a nice night. Mouth-breather.</p>
  <p> We never would've upset you if we knew you had superpowers. You’re going to be home by 8, listening to the Talking Heads and reading Vonnegut or something. That sounds like a nice night. Mouth-breather. So, Jonathan, how was the pull-out? Do you know
    anything about sensory deprivation tanks? Specifically how to build one?You are such a nerd.</p>
  <p>You’re going to be home by 8, listening to the Talking Heads and reading Vonnegut or something. That sounds like a nice night. Mouth-breather. So, Jonathan, how was the pull-out? Do you know anything about sensory deprivation tanks? Specifically how
    to build one? You are such a nerd. No wonder you only hang out with boys.</p>
  <p> That sounds like a nice night. Mouth-breather. So, Jonathan, how was the pull-out? Do you know anything about sensory deprivation tanks? Specifically how to build one?</p>
  <p>That sounds like a nice night. I need my paddles! Yeah, I want a date with Bo Derek. We all want things. It’s about the shadow monster, isn’t it? You’re going to take out the demigorgon with a slingshot? You are such a nerd. No wonder you only hang
    out with boys.</p>
  <p> I need my paddles! Yeah, I want a date with Bo Derek. We all want things. It’s about the shadow monster, isn’t it? You’re going to take out the demigorgon with a slingshot? You are such a nerd. No wonder you only hang out with boys. YOU BETTER RUN!</p>
  <p>She's our friend, and she's crazy! You are such a nerd. We all want things. It’s about the shadow monster, isn’t it? You’re going to take out the demigorgon with a slingshot? You are such a nerd. </p>
  <p>Bitchin' Let’s burn that lab to the ground. No. . . no El, you're not the monster. You saved me. Do you understand? You saved me. Mouth-breather. You’re right.</p>
  <p>Mouth-breather. You’re right. You are a freak…. Who would you rather be friends with: Bowie or Kenny Rogers? Why’s he gotta kick the door? Nobody normal ever accomplished anything meaningful in this world.</p>
  <p> You’re right. You are a freak…. Who would you rather be friends with: Bowie or Kenny Rogers?</p>
</main>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search