I am trying to create a form that pops up when a button is clicked. I have positioned it and styled it but my script doesn't seem to be working. I have checked the id's and they match and have also checked the class name and there is no issue. I can't seem to locate where my script went wrong. I apologies for the large amount of code but I wasn't sure if there is anything I didn't need to include. Any help is much appreciated!

Here is the code

document.querySelector("#new_record_submit").addEventListener("click", function() {
  document.querySelector(".popup").classList.add("active");
});

document.querySelector(".popup .close-btn").addEventListener("click", function() {
  document.querySelector(".popup").classList.remove("active");
});

.popup {
  position: absolute;
  top: 35%;
  right: 35%;
  border: 1px solid black;
  padding: 40px 40px;
  background-color: white;
  opacity: 0;
  transform: translate(-50%, -50%) scale(1.25);
  transition: top 0ms ease-in-out 200ms, opacity 200ms ease-in-out 0ms, transform 20ms ease-in-out 0ms;
pointer-events: none
}

.popup.active {
  top: 50%;
  opacity: 1;
  transform: translate(-50%, -50%) scale(1.25);
  transition: top 0ms ease-in-out 0ms, opacity 200ms ease-in-out 0ms, transform 20ms ease-in-out 0ms;
}

.popup .close-btn {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 15px;
  height: 15px;
  background: #16a583;
  color: #232322;
  text-align: center;
  line-height: 15px;
  border-radius: 15px;
  cursor: pointer;
}

<button ><a href="">New Record</a><img  src="./images/new_record.png"></button>

<div >
  <div >
    &times;
  </div>
  <h2>Add a Customer</h2>
  <br />
  <br />
  <br />
  <form method="post" action="customers.php">
    <label>Customers Name:</label>
    <input type="text" name="customer_name" />
    <br />
    <br />
    <label>Customers Address:</label>
    <input type="text" name="customer_address" />
    <br />
    <br />
    <label>Customers Phone number:</label>
    <input type="text" name="customer_phone" />
    <br />
    <br />
    <label>Customers Email:</label>
    <input type="email" name="customer_email" />
    <br />
    <br />
    <button  type="submit" id="new_record_submit" name="submit_customers"><p>Submit</p></button>
  </form>
</div>

CodePudding user response：

The .popup element has an opacity of 0, but is still covering the button, so you can't click through it.

A simple way to fix this: give the .popup a pointer-events: none You could also give it a display: none, but then you wouldn't have the fading animation.

Also, as @Barmar said, the button you are adding an event listener to show the popup is actually inside the popup. Give the button at the top an id of new_record and add the click event listener to that one instead.

CodePudding user response：

there is a little typo in your code in document.querySelector("#new_record_submit"), should be document.querySelector("#new_record"), because <button ><a href="">New Record</a><img src="./images/new_record.png"></button> ,

and also you can use clasList.toogle() to clicked

document.querySelector(".new_record").addEventListener("click", function () {
  document.querySelector(".popup").classList.toggle("active");
});

.popup {
  position: absolute;
  top: 35%;
  right: 35%;
  border: 1px solid black;
  padding: 40px 40px;
  background-color: white;
  opacity: 0;
  transform: translate(-50%, -50%) scale(1.25);
  transition: top 0ms ease-in-out 200ms, opacity 200ms ease-in-out 0ms, transform 20ms ease-in-out 0ms;
pointer-events: none
}

.popup.active {
  top: 50%;
  opacity: 1;
  transform: translate(-50%, -50%) scale(1.25);
  transition: top 0ms ease-in-out 0ms, opacity 200ms ease-in-out 0ms, transform 20ms ease-in-out 0ms;
}

.popup .close-btn {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 15px;
  height: 15px;
  background: #16a583;
  color: #232322;
  text-align: center;
  line-height: 15px;
  border-radius: 15px;
  cursor: pointer;
}

<button ><a href="">New Record</a><img  src="./images/new_record.png"></button>

<div >
  <div >
    &times;
  </div>
  <h2>Add a Customer</h2>
  <br />
  <br />
  <br />
  <form method="post" action="customers.php">
    <label>Customers Name:</label>
    <input type="text" name="customer_name" />
    <br />
    <br />
    <label>Customers Address:</label>
    <input type="text" name="customer_address" />
    <br />
    <br />
    <label>Customers Phone number:</label>
    <input type="text" name="customer_phone" />
    <br />
    <br />
    <label>Customers Email:</label>
    <input type="email" name="customer_email" />
    <br />
    <br />
    <button  type="submit" id="new_record_submit" name="submit_customers"><p>Submit</p></button>
  </form>
</div>