Custom pop up - ( X ) not closing.

[Phreshcareco]

Hey guys,

Ive been messing around with a little coding not the best at it. Kinda self taught, ive been a little stuck with a little problem. 

Ive created a pop up to try drum up some subscribers, i got it to work. But only problem i am having now is that when i try click the (x) to close it. It wont work. Ive also applied a .js where you click outside the pop up that it will close But that wont work either. 

Can someone please have a quick look and see what i done wrong? I would greatly appreciate it. I can upload the website its on a duplicate while testing. 

This is the .css

/* Main popup styling */
#customNewsletter {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100vh !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  z-index: 9999 !important;
}

/* Popup container styling */
.customNewsletter__container {
  width: 90%;
  max-width: 700px;
  background-color: #181e40; /* Dark background */
  border-radius: 15px;
  box-shadow: 0 8px 30px rgba(255, 255, 255, 0.4); /* Light shadow */
  padding: 40px;
  border: 3px solid #fff;
  text-align: center;
  position: relative;
  overflow-y: auto;
  max-height: 50vh; /* Limit height to fit smaller screens */
}

/* Close button styling */
#customNewsletter__close {
  position: absolute; /* Ensure it's positioned relative to a parent */
  top: 15px;
  right: 15px;
  font-weight: bold;
  border: none; /* No border for cleaner look */
  background-color: transparent; /* Keep it transparent, but ensure visibility */
  font-size: 2rem;
  color: #fff; /* Visible color */
  cursor: pointer;
  z-index: 10; /* Ensure it's on top of other elements */
}

/* Logo styling */
.customNewsletter__logo {
  display: flex;
  justify-content: center; /* Center the logo */
  align-items: center; /* Vertically center the logo within its container */
  margin-bottom: 25px;
  width: 100%; /* Make the container take full width */
}

.customNewsletter__logo img {
  width: 65%; /* Scale image to full width */
  max-width: none; /* Remove the max-width limit */
  height: auto; /* Keep aspect ratio */
}
/* Text styling */
.customNewsletter__text {
  margin-top: 20px;
  padding: 20px 0;
  font-weight: 600;
  font-size: 1.9rem;
  color: #ffffff; /* Light color for the text */
}

/* Questionnaire styling */
#question-box {
  display: flex;
  flex-direction: column;
  gap: 25px;
  margin-top: 20px;
  margin-bottom: 40px;
}

.answer-button {
  background-color: #ffffff; /* Light background */
  color: #181e40; /* Dark text color */
  border: none;
  padding: 20px;
  font-size: 1.8rem;
  font-weight: 600;
  border-radius: 10px;
  cursor: pointer;
  box-shadow: 0 4px 20px rgba(255, 255, 255, 0.15); /* Light shadow */
  transition: background-color 0.3s ease, transform 0.2s ease;
}

.answer-button:hover {
  background-color: #e0e4f2; /* Lighter background for hover */
  transform: scale(1.05);
  position: center;
}

/* Email Subscription Form styling */
#email-box, #confirmation-box {
  margin-top: 20px;
}

.custom__newsletter-form {
  width: 100%;
  max-width: 500px;
}

.newsletter-form__field-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.field {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}

.field__input {
  width: 100%;
  padding: 18px;
  margin-bottom: 20px;
  border: 2px solid #ffffff; /* Light border */
  border-radius: 8px;
  font-size: 1.2rem;
  box-shadow: 0 2px 10px rgba(255, 255, 255, 0.1); /* Light shadow */
}

.newsletter-form__button {
  padding: 15px 30px;
  width: 100%;
  background-color: #ffffff; /* Light background */
  color: #181e40; /* Dark text color */
  border: none;
  border-radius: 8px;
  font-size: 1.2rem;
  cursor: pointer;
  transition: background-color 0.3s ease, transform 0.2s ease;
}

.newsletter-form__button:hover {
  background-color: #e0e4f2; /* Lighter hover background */
  transform: scale(1.05);
}

/* Confirmation message styling */
#confirmation-box {
  text-align: center;
  padding: 25px;
  font-size: 1.4rem;
  color: #ffffff; /* Light text */
}

/* Responsive Styles */
@media only screen and (max-width: 768px) {
  .customNewsletter__container {
    width: 95%;
    max-width: 90%;
  }

  #customNewsletter__close {
    font-size: 2.5rem;
  }

  .answer-button {
    font-size: 1.6rem;
  }
}


@media only screen and (min-width: 600px) {
  .customNewsletter__container {
    width: 80%;
    padding: 30px;
  }
}

@media only screen and (min-width: 900px) {
  .customNewsletter__container {
    max-width: 600px;
    padding: 50px;
  }

  .customNewsletter__text {
    font-size: 1.8rem;
  }

  .answer-button {
    font-size: 1.5rem;
    padding: 18px;
  }

  .newsletter-form__button {
    width: auto;
    padding: 15px 40px;
  }
}

This is the .js

document.addEventListener("DOMContentLoaded", function () {
  const popup = document.getElementById("customNewsletter");
  const answerButtons = document.querySelectorAll(".answer-button");
  const emailBox = document.getElementById("email-box");
  const questionBox = document.getElementById("question-box");
  const responseText = document.getElementById("response-text");
  const confirmationBox = document.getElementById("confirmation-box");
  const closePopup = document.getElementById("customNewsletter__close");

  // Check for cookie before showing popup
  if (!Cookies.get('popup_shown')) {
    setTimeout(() => {
      popup.style.display = "flex"; // Show the popup after a delay
    }, 30000); // 30-second delay
  }

  // Handle answer button click
  answerButtons.forEach(button => {
    button.addEventListener("click", function () {
      const response = button.getAttribute("data-response");
      responseText.textContent = response;
      questionBox.style.display = "none";
      emailBox.style.display = "block";
    });
  });

  // Handle email form submission
  const form = document.querySelector('.custom__newsletter-form');
  if (form) {
    form.addEventListener("submit", function (event) {
      event.preventDefault();
      emailBox.style.display = "none";
      confirmationBox.style.display = "block";
      // Set the cookie to indicate the popup has been shown
      Cookies.set('popup_shown', 'true', { expires: 30 }); // Set it for 30 days for testing
      console.log("Popup shown cookie set"); // Debugging step
    });
  }

  // Close the popup if close button exists
  if (closePopup) {
    closePopup.addEventListener("click", function (e) {
      console.log("Close button clicked"); // Debugging step
      popup.style.display = "none";
    });
  } else {
    console.warn("Close button not found");
  }

  // Close the popup on outside click
  if (popup) {
    popup.addEventListener("click", function (event) {
      if (event.target === popup) {
        popup.style.display = "none";
      }
    });
  }
});

.liquid. 

.liquid
 {{ "custom-subscriber-popup.css" | asset_url | stylesheet_tag }}

<div id="customNewsletter">
  <div class="customNewsletter__container">
    <button id="customNewsletter__close">X</button>
    <div class="customNewsletter__logo">
      <img src="{{ section.settings.logo | img_url: 'master' }}" alt="" />
    </div>
    <div class="customNewsletter__text">
      <h1>{{ section.settings.heading }}</h1>
      <p>{{ section.settings.paragraph }}</p>
      
      <!-- Questionnaire -->
      <div id="question-box">
        <p>What's your secret for looking PHRESH?</p>
        <button class="answer-button" data-response="Nice! Want tips? Drop your email!">A solid skincare routine!</button>
        <button class="answer-button" data-response="Good combo! Level up your skincare—enter your email!">Coffee and sleep!</button>
        <button class="answer-button" data-response="We can help! Subscribe for quick hacks!">I just wing it!</button>
        <button class="answer-button" data-response="No worries! We’ve got you—drop your email to start">Honestly, no idea!</button>
      </div>
      
      <!-- Email Subscription Form -->
      <div id="email-box" style="display: none;">
        <p id="response-text"></p>
        {% form 'customer', class: 'custom__newsletter-form' %}
          <input type="hidden" name="contact[tags]" value="newsletter">
          <div class="newsletter-form__field-wrapper">
            <div class="field">
              <input
                id="NewsletterForm--{{ section.id }}"
                type="email"
                name="contact[email]"
                class="field__input"
                aria-required="true"
                autocorrect="off"
                autocapitalize="off"
                autocomplete="email"
                placeholder="Enter your email"
                required
              >
              <label class="field__label" for="NewsletterForm--{{ section.id }}">Email</label>
              <button type="submit" class="newsletter-form__button field__button" name="commit" id="Subscribe" aria-label="Subscribe">Subscribe</button>
            </div>
          </div>
        {% endform %}
      </div>
      
      <!-- Confirmation Message -->
      <div id="confirmation-box" style="display: none;">
        <p>Thank you! A code will be emailed to you shortly.</p>
      </div>

    </div>
  </div>
</div>

{{ 'custom-subscriber-popup.js' | asset_url | script_tag }}

{% schema %}
{
  "name": "Pop Up",
  "settings": [
    {
      "type": "image_picker",
      "id": "logo",
      "label": "Logo",
      "info": "Logo goes here"
    },
    {
      "type": "text",
      "id": "heading",
      "label": "Heading",
      "default": "Heading Here",
      "placeholder": "Place Your Heading Here",
      "info": "Header for your popup"
    },
    {
      "type": "textarea",
      "id": "paragraph",
      "label": "Paragraph",
      "default": "Tell your customer why they should subscribe.",
      "placeholder": "Subscribe now to hear about great deals!",
      "info": "Paragraph area for pop up"
    }
  ],
  "presets": [
    {
      "name": "Pop Up"
    }
  ]
}
{% endschema %}

{% javascript %}
document.addEventListener("DOMContentLoaded", function () {
  const popup = document.getElementById("customNewsletter");
  const answerButtons = document.querySelectorAll(".answer-button");
  const emailBox = document.getElementById("email-box");
  const questionBox = document.getElementById("question-box");
  const responseText = document.getElementById("response-text");
  const confirmationBox = document.getElementById("confirmation-box");
  const closePopup = document.getElementById("customNewsletter__close");

  // Show the popup on page load
  popup.style.display = "block";

  // Handle answer button click
  answerButtons.forEach(button => {
    button.addEventListener("click", function () {
      const response = button.getAttribute("data-response");
      responseText.textContent = response;
      questionBox.style.display = "none";
      emailBox.style.display = "block";
    });
  });

  // Handle email form submission
  const form = document.querySelector('.custom__newsletter-form');
  form.addEventListener("submit", function (event) {
    event.preventDefault();

    // AJAX can be used here to submit the form without reloading the page
    emailBox.style.display = "none";
    confirmationBox.style.display = "block";

    // Optionally, set a cookie to prevent the popup from showing again
    Cookies.set('popup_shown', 'true', { expires: 0.0833 }); // 2 hours
  });

  // Close the popup
  closePopup.addEventListener("click", function () {
    popup.style.display = "none";
  });
});
{% endjavascript %}

[softlab]

Hi @Phreshcareco ,
Thank you for bringing this to my attention. Could you please share the URL where the popup is displayed? I’ll review it and provide insights on why this issue is occurring.
Thanks

[rajweb · Accepted solution]

Hey @Phreshcareco ,

Thank you for providing your Liquid code and JavaScript. Here are a few suggestions to help resolve the issues with your pop-up close button and the outside click functionality.

JavaScript Debugging:

The JavaScript code looks mostly fine, but let's ensure everything is working as intended. Here are a few steps:

1. Checks for Errors: Open your browser's developer console (F12 or right-click > Inspect) and look for any JavaScript errors that may be causing the functionality to fail.

2. Check for missing cookies library: Ensure that the Cookies library is included in your code. If you're using a cookies library (like js-cookie), it should be properly loaded before your script runs.

Update JavaScript for Popup Display Logic:

To make sure your pop-up appears correctly and can be closed, you may want to modify the JavaScript slightly:

document.addEventListener("DOMContentLoaded", function () {
  const popup = document.getElementById("customNewsletter");
  const answerButtons = document.querySelectorAll(".answer-button");
  const emailBox = document.getElementById("email-box");
  const questionBox = document.getElementById("question-box");
  const responseText = document.getElementById("response-text");
  const confirmationBox = document.getElementById("confirmation-box");
  const closePopup = document.getElementById("customNewsletter__close");

  // Check for cookie before showing popup
  if (!Cookies.get('popup_shown')) {
    setTimeout(() => {
      popup.style.display = "flex"; // Show the popup after a delay
    }, 30000); // 30-second delay
  }

  // Handle answer button click
  answerButtons.forEach(button => {
    button.addEventListener("click", function () {
      const response = button.getAttribute("data-response");
      responseText.textContent = response;
      questionBox.style.display = "none";
      emailBox.style.display = "block";
    });
  });

  // Handle email form submission
  const form = document.querySelector('.custom__newsletter-form');
  if (form) {
    form.addEventListener("submit", function (event) {
      event.preventDefault();
      emailBox.style.display = "none";
      confirmationBox.style.display = "block";
      // Set the cookie to indicate the popup has been shown
      Cookies.set('popup_shown', 'true', { expires: 30 }); // Set it for 30 days for testing
      console.log("Popup shown cookie set"); // Debugging step
    });
  }

  // Close the popup if close button exists
  if (closePopup) {
    closePopup.addEventListener("click", function () {
      console.log("Close button clicked"); // Debugging step
      popup.style.display = "none";
    });
  }

  // Close the popup on outside click
  popup.addEventListener("click", function (event) {
    if (event.target === popup) {
      popup.style.display = "none";
    }
  });
});

CSS Z-Index:

Ensure that your CSS styles do not inadvertently hide the close button or the pop-up itself. Since you've set a z-index of  9999 for the popup, it should be above most other elements. Double-check to ensure there aren’t any conflicting styles.

Liquid Integration:

Make sure your JavaScript code is being correctly integrated into your Liquid template. Since you are using {% javascript %} tags, confirm that this code is executed in the right order after the DOM is fully loaded.

After implementing the changes:

• Test the Close Button: Ensure that clicking the "X" successfully hides the pop-up.
• Test Outside Click: Click outside the pop-up (the grey overlay) to confirm it closes the pop-up as well.

If the popup still doesn't close after making these adjustments, please let me know, and we can troubleshoot further!

[rajweb]

Hey @Phreshcareco ,

Thank you for your reply. I'm glad to hear that the solution worked well for you. If you require any more help, please don't hesitate to reach out. If you find this information useful, a Like would be greatly appreciated.