HTML CSS Popup Design

May 14, 2025 · AI Conversations

User
design ths popup in html and css !
Assistant
Here’s how you can create an HTML + CSS popup similar to the design in the image you provided:

—

### ✅ **HTML (`popup.html`)**

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <title>Popup</title>
  <link rel="stylesheet" href="style.css" />
</head>
<body>

<div class="popup">
  <button class="close-btn">×</button>

  <div class="popup-header">
    <img src="logo-houseoftiles.png" alt="House of Tiles" class="logo-left" />
    <img src="logo-whitemeadow.png" alt="White Meadow Interiors" class="logo-right" />
  </div>

  <div class="popup-content">
    <h2>DESIGN YOUR<br><span>DREAM BATHROOM</span></h2>
    <p class="subtext">with Emma Butler of White Meadow Interiors</p>

    <p class="info">
      Join us at our Sandyford Showroom for an exclusive in-store event featuring 1-on-1 design consultations with Emma Butler and a live Bathroom Design Q&A session.
    </p>

    <p class="event-details">
      📅 <strong>Saturday 24<sup>th</sup> May, 9am - 5pm</strong><br>
      📍 House of Tiles Sandyford
    </p>

    <div class="popup-image">
      <img src="emma-butler.png" alt="Emma Butler holding color samples" />
    </div>

    <a href="#" class="cta-button">Apply for your 1-on-1 design consultation</a>
  </div>
</div>

</body>
</html>

—

### 🎨 **CSS (`style.css`)**

body {
  font-family: Arial, sans-serif;
  background-color: rgba(0,0,0,0.5);
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

.popup {
  background: #fff;
  width: 380px;
  max-width: 100%;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 0 20px rgba(0,0,0,0.3);
  position: relative;
}

.close-btn {
  position: absolute;
  top: 10px;
  right: 15px;
  background: transparent;
  border: none;
  font-size: 24px;
  cursor: pointer;
}

.popup-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px;
  background: #eaeaea;
}

.logo-left {
  height: 40px;
}

.logo-right {
  height: 40px;
}

.popup-content {
  padding: 20px;
  text-align: center;
}

.popup-content h2 {
  font-size: 22px;
  font-weight: bold;
  margin: 0;
}

.popup-content h2 span {
  color: #333;
}

.subtext {
  color: #c30072;
  font-weight: bold;
  margin-bottom: 10px;
}

.info {
  font-size: 14px;
  color: #666;
  margin: 15px 0;
}

.event-details {
  font-size: 15px;
  color: #333;
  margin-bottom: 20px;
  line-height: 1.6;
}

.popup-image img {
  width: 100%;
  border-radius: 8px;
  margin-bottom: 20px;
}

.cta-button {
  display: inline-block;
  background: #c30072;
  color: white;
  padding: 15px 20px;
  text-decoration: none;
  font-weight: bold;
  border-radius: 10px;
  box-shadow: 0 6px 15px rgba(0,0,0,0.2);
  transition: background 0.3s ease;
}

.cta-button:hover {
  background: #a1005d;
}

—

### 📁 Assets to Replace

– `logo-houseoftiles.png` – Left logo (House of Tiles)
– `logo-whitemeadow.png` – Right logo (White Meadow)
– `emma-butler.png` – Image of Emma holding the swatch

You can export them from the original image or let me know if you'd like me to extract and provide those asset images for you.

Would you like a version with actual base64 inline images for easier testing?

User
i have to basically create this in wordpress , so when site opens this will show !
Assistant
Great! Here's how you can create this **popup in WordPress** so that it **automatically shows when the site opens**.

—

### ✅ **Step-by-Step Setup**

—

### 🔧 Step 1: Add the HTML (Popup Content)

Add the following HTML code inside your **WordPress theme’s `footer.php`** (right before the closing “ tag), or use a **Custom HTML widget** in a **site-wide footer** via **Elementor / Widget area**:

<div id="popup-overlay">
  <div class="popup">
    <button class="close-btn">×</button>

    <div class="popup-header">
      <img src="https://yourdomain.com/path-to/house-of-tiles-logo.png" alt="House of Tiles" class="logo-left" />
      <img src="https://yourdomain.com/path-to/white-meadow-logo.png" alt="White Meadow Interiors" class="logo-right" />
    </div>

    <div class="popup-content">
      <h2>DESIGN YOUR<br><span>DREAM BATHROOM</span></h2>
      <p class="subtext">with Emma Butler of White Meadow Interiors</p>

      <p class="info">
        Join us at our Sandyford Showroom for an exclusive in-store event featuring 1-on-1 design consultations with Emma Butler and a live Bathroom Design Q&A session.
      </p>

      <p class="event-details">
        📅 <strong>Saturday 24<sup>th</sup> May, 9am - 5pm</strong><br>
        📍 House of Tiles Sandyford
      </p>

      <div class="popup-image">
        <img src="https://yourdomain.com/path-to/emma-butler-image.png" alt="Emma Butler holding color samples" />
      </div>

      <a href="#" class="cta-button">Apply for your 1-on-1 design consultation</a>
    </div>
  </div>
</div>

> 🔁 Replace `https://yourdomain.com/path-to/…` with actual uploaded media URLs from WordPress Media Library.

—

### 🎨 Step 2: Add CSS

You can either:
– Add it via **Customizer → Additional CSS**
– Or enqueue it in your theme

Paste this CSS:

#popup-overlay {
  position: fixed;
  top: 0;
  left: 0;
  height: 100vh;
  width: 100%;
  background: rgba(0,0,0,0.6);
  z-index: 9999;
  display: flex;
  justify-content: center;
  align-items: center;
}

.popup {
  background: #fff;
  width: 400px;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 0 25px rgba(0,0,0,0.3);
  position: relative;
  animation: fadeIn 0.4s ease;
}

@keyframes fadeIn {
  from { opacity: 0; transform: scale(0.95); }
  to { opacity: 1; transform: scale(1); }
}

.close-btn {
  position: absolute;
  top: 10px;
  right: 15px;
  background: transparent;
  border: none;
  font-size: 24px;
  cursor: pointer;
}

.popup-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px;
  background: #f5f5f5;
}

.logo-left, .logo-right {
  height: 40px;
}

.popup-content {
  padding: 20px;
  text-align: center;
}

.popup-content h2 {
  font-size: 22px;
  font-weight: bold;
  margin: 0;
}

.popup-content h2 span {
  color: #000;
}

.subtext {
  color: #c30072;
  font-weight: bold;
  margin: 10px 0;
}

.info {
  font-size: 14px;
  color: #444;
  margin: 15px 0;
}

.event-details {
  font-size: 15px;
  margin-bottom: 20px;
}

.popup-image img {
  width: 100%;
  border-radius: 8px;
  margin-bottom: 20px;
}

.cta-button {
  display: inline-block;
  background: #c30072;
  color: white;
  padding: 15px 20px;
  text-decoration: none;
  font-weight: bold;
  border-radius: 10px;
  box-shadow: 0 6px 15px rgba(0,0,0,0.2);
  transition: background 0.3s ease;
}

.cta-button:hover {
  background: #a1005d;
}

—

### 🧠 Step 3: Add JavaScript (Auto-Show & Close)

Also paste this JS at the end of `footer.php` or using a plugin like **Insert Headers and Footers**:

<script>
  document.addEventListener("DOMContentLoaded", function () {
    const popup = document.getElementById("popup-overlay");
    const closeBtn = document.querySelector(".close-btn");

    // Close when clicking X
    closeBtn.addEventListener("click", () => {
      popup.style.display = "none";
    });

    // Optional: Auto close after 10s
    // setTimeout(() => { popup.style.display = "none"; }, 10000);
  });
</script>

—

### ✅ Done!

Now, the popup will appear **as soon as the site loads**, and the user can close it by clicking **×**.

Would you like this as a **reusable plugin or shortcode** as well?

User
  i want to add this from ip
Assistant
If you want to **display this popup only for visitors from a specific IP address**, here’s how to do it in WordPress:

—

### ✅ **Goal**: Show popup **only if visitor's IP matches** a specific IP like `203.0.113.42`

—

### 🔧 Option 1: Add PHP + JS logic in `footer.php` or via plugin

#### 🛠 Step 1: PHP Code to Check IP
Edit your theme’s `footer.php` file and wrap the popup HTML inside a PHP condition:

<?php
$user_ip = $_SERVER['REMOTE_ADDR'];
$allowed_ip = '203.0.113.42'; // Replace with your desired IP

if ($user_ip === $allowed_ip): ?>
<div id="popup-overlay">
  <div class="popup">
    <button class="close-btn">×</button>

    <div class="popup-header">
      <img src="https://yourdomain.com/path-to/house-of-tiles-logo.png" alt="House of Tiles" class="logo-left" />
      <img src="https://yourdomain.com/path-to/white-meadow-logo.png" alt="White Meadow Interiors" class="logo-right" />
    </div>

    <div class="popup-content">
      <h2>DESIGN YOUR<br><span>DREAM BATHROOM</span></h2>
      <p class="subtext">with Emma Butler of White Meadow Interiors</p>

      <p class="info">
        Join us at our Sandyford Showroom for an exclusive in-store event featuring 1-on-1 design consultations with Emma Butler and a live Bathroom Design Q&A session.
      </p>

      <p class="event-details">
        📅 <strong>Saturday 24<sup>th</sup> May, 9am - 5pm</strong><br>
        📍 House of Tiles Sandyford
      </p>

      <div class="popup-image">
        <img src="https://yourdomain.com/path-to/emma-butler-image.png" alt="Emma Butler holding color samples" />
      </div>

      <a href="#" class="cta-button">Apply for your 1-on-1 design consultation</a>
    </div>
  </div>
</div>
<?php endif; ?>

✅ This code will render the popup **only if the current visitor's IP matches** the allowed one.

—

### 🧠 Step 2: Add CSS and JS Globally

Add the CSS and JS I provided earlier to your theme or via plugin (like “Insert Headers and Footers”), since that won't affect the condition — they’ll simply not run if the popup isn’t printed.

—

### ⚠️ Notes:

– To test your IP, you can echo it:

echo $_SERVER['REMOTE_ADDR'];

– If you're behind Cloudflare or a reverse proxy, use:

$user_ip = $_SERVER['HTTP_CF_CONNECTING_IP'] ?? $_SERVER['REMOTE_ADDR'];

—

### ✅ Done!

Now the popup will only show for the specified IP.
Let me know if you want to load this conditionally via **Elementor**, **a shortcode**, or **custom plugin** instead.

User
give me js and css also !
Assistant
Here’s the **full CSS and JavaScript** for your popup, along with the **IP-based HTML condition** you’ll use in `footer.php` or any global file.

—

## ✅ Step 1: CSS (Add to Customizer or enqueue it)
Paste this into **Appearance → Customize → Additional CSS** or enqueue via your theme:

#popup-overlay {
  position: fixed;
  top: 0;
  left: 0;
  height: 100vh;
  width: 100%;
  background: rgba(0,0,0,0.6);
  z-index: 9999;
  display: flex;
  justify-content: center;
  align-items: center;
}

.popup {
  background: #fff;
  width: 400px;
  max-width: 90%;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 0 25px rgba(0,0,0,0.3);
  position: relative;
  animation: fadeIn 0.4s ease;
}

@keyframes fadeIn {
  from { opacity: 0; transform: scale(0.95); }
  to { opacity: 1; transform: scale(1); }
}

.close-btn {
  position: absolute;
  top: 10px;
  right: 15px;
  background: transparent;
  border: none;
  font-size: 24px;
  cursor: pointer;
}

.popup-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px;
  background: #f5f5f5;
}

.logo-left,
.logo-right {
  height: 40px;
}

.popup-content {
  padding: 20px;
  text-align: center;
}

.popup-content h2 {
  font-size: 22px;
  font-weight: bold;
  margin: 0;
}

.popup-content h2 span {
  color: #000;
}

.subtext {
  color: #c30072;
  font-weight: bold;
  margin: 10px 0;
}

.info {
  font-size: 14px;
  color: #444;
  margin: 15px 0;
}

.event-details {
  font-size: 15px;
  margin-bottom: 20px;
}

.popup-image img {
  width: 100%;
  border-radius: 8px;
  margin-bottom: 20px;
}

.cta-button {
  display: inline-block;
  background: #c30072;
  color: white;
  padding: 15px 20px;
  text-decoration: none;
  font-weight: bold;
  border-radius: 10px;
  box-shadow: 0 6px 15px rgba(0,0,0,0.2);
  transition: background 0.3s ease;
}

.cta-button:hover {
  background: #a1005d;
}

—

## ✅ Step 2: JavaScript (Auto-show & Close)
Add this at the bottom of `footer.php`, or use a plugin like **"Insert Headers and Footers" → Footer Scripts** section:

<script>
  document.addEventListener("DOMContentLoaded", function () {
    const popup = document.getElementById("popup-overlay");
    const closeBtn = document.querySelector(".close-btn");

    if (popup && closeBtn) {
      closeBtn.addEventListener("click", () => {
        popup.style.display = "none";
      });

      // Optional: Auto-close after 10 seconds
      // setTimeout(() => popup.style.display = "none", 10000);
    }
  });
</script>

—

## ✅ Bonus: Example PHP IP Filter with Popup HTML

Put this inside `footer.php` or a custom shortcode:

<?php
$user_ip = $_SERVER['REMOTE_ADDR'];
$allowed_ip = '203.0.113.42'; // Replace with your IP

if ($user_ip === $allowed_ip): ?>
  <!-- HTML CONTENT HERE (popup-overlay div) -->
<?php endif; ?>

—

Let me know if you'd prefer to turn this into a **shortcode** or **popup plugin**, or trigger only **once per session or day** using cookies.

User
I dont have elementor here , so can i use cutom html block?
somewhere , please suggest something ?
Assistant
Yes! Since you're **not using Elementor**, you can still show the popup easily by using a **Custom HTML block**, available in any WordPress page builder (Classic Editor, Gutenberg, or Site-wide widgets).

Here are your **options**, depending on where you want to place the popup.

—

### ✅ **Option 1: Add to `footer.php` (Best for site-wide popup)**
Add this to your active theme’s `footer.php` (right before “):

<?php
$user_ip = $_SERVER['REMOTE_ADDR'];
$allowed_ip = '203.0.113.42'; // Replace with your IP

if ($user_ip === $allowed_ip): ?>
  <div id="popup-overlay">
    <div class="popup">
      <button class="close-btn">×</button>
      <div class="popup-header">
        <img src="https://yourdomain.com/logo1.png" class="logo-left" />
        <img src="https://yourdomain.com/logo2.png" class="logo-right" />
      </div>
      <div class="popup-content">
        <h2>DESIGN YOUR<br><span>DREAM BATHROOM</span></h2>
        <p class="subtext">with Emma Butler of White Meadow Interiors</p>
        <p class="info">
          Join us at our Sandyford Showroom for an exclusive in-store event featuring 1-on-1 design consultations with Emma Butler and a live Bathroom Design Q&A session.
        </p>
        <p class="event-details">
          📅 <strong>Saturday 24<sup>th</sup> May, 9am - 5pm</strong><br>
          📍 House of Tiles Sandyford
        </p>
        <div class="popup-image">
          <img src="https://yourdomain.com/emma.png" />
        </div>
        <a href="#" class="cta-button">Apply for your 1-on-1 design consultation</a>
      </div>
    </div>
  </div>
<?php endif; ?>

> Replace image URLs with actual uploaded Media Library links.

—

### ✅ **Option 2: Add via Site-Wide Widget (if available)**

If your theme supports **footer widget areas**, do this:

1. Go to **Appearance → Widgets**.
2. Find a **footer widget** or **“Site-wide” widget area**.
3. Add a **Custom HTML widget** and paste the full popup HTML inside.
4. (Optional) Use a plugin like **Code Snippets** to write IP-checking logic in PHP and enqueue the HTML via shortcode or hook.

—

### ✅ **Option 3: Add via Gutenberg Page/Post (for testing)**

1. Edit any page/post.
2. Add a **Custom HTML block**.
3. Paste only the popup HTML (skip PHP here — this is for testing only).
4. Add CSS via **Customizer → Additional CSS**.
5. Add JS via **Code Snippets plugin** or `footer.php`.

—

### ✅ Final Touches (Required)

– **CSS**: Go to **Appearance → Customize → Additional CSS** → paste the popup CSS there (see previous messages).
– **JS**: Add in `footer.php` just before “, or use [Insert Headers and Footers](https://wordpress.org/plugins/insert-headers-and-footers/) to inject JS site-wide.

—

### ✅ Best Practice for Future
If you're going to reuse this popup or make many like it:
– Consider creating a **popup plugin** or using a lightweight popup library like [Micromodal.js](https://micromodal.vercel.app/) for better control.
– Or I can help you wrap this in a **shortcode or plugin** for you.

Would you like that plugin version too?

User
×

DESIGN YOURDREAM BATHROOM
with Emma Butler of White Meadow Interiors

Join us at our Sandyford Showroom for an exclusive in-store event featuring 1-on-1 design consultations with Emma Butler and a live Bathroom Design Q&A session.

📅 Saturday 24th May, 9am – 5pm
📍 House of Tiles Sandyford

Apply for your 1-on-1 design consultation

<style>
#popup-overlay {
  position: fixed;
  top: 0;
  left: 0;
  height: 100vh;
  width: 100%;
  background: rgba(0,0,0,0.6);
  z-index: 9999;
  display: flex;
  justify-content: center;
  align-items: center;
}

.popup {
  background: #fff;
  width: 400px;
  max-width: 90%;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 0 25px rgba(0,0,0,0.3);
  position: relative;
  animation: fadeIn 0.4s ease;
}

@keyframes fadeIn {
  from { opacity: 0; transform: scale(0.95); }
  to { opacity: 1; transform: scale(1); }
}

.close-btn {
  position: absolute;
  top: 10px;
  right: 15px;
  background: transparent;
  border: none;
  font-size: 24px;
  cursor: pointer;
}

.popup-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px;
  background: #f5f5f5;
}

.logo-left,
.logo-right {
  height: 40px;
}

.popup-content {
  text-align: center;
}
.popup-heading{
	background-color:#1b313e;
	padding:10px;
}
.popup-heading h2 {
  color: #fff;
	    margin-bottom: 0px;
}

.subtext {
  color: #c30072;
  font-weight: bold;
  margin: 10px 0;
}

.info {
  font-size: 14px;
  color: #444;
  margin: 15px 0;
}

.event-details {
  font-size: 15px;
  margin-bottom: 20px;
}

.popup-image img {
  width: 100%;
  border-radius: 8px;
  margin-bottom: 20px;
}

.cta-button {
  display: inline-block;
  background: #c30072;
  color: white;
  padding: 15px 20px;
  text-decoration: none;
  font-weight: bold;
  border-radius: 10px;
  box-shadow: 0 6px 15px rgba(0,0,0,0.2);
  transition: background 0.3s ease;
}

.cta-button:hover {
  background: #a1005d;
}
</style>
<script>
document.addEventListener("DOMContentLoaded", function () {
    const popup = document.getElementById("popup-overlay");
    const closeBtn = document.querySelector(".close-btn");

    if (popup && closeBtn) {
      closeBtn.addEventListener("click", () => {
        popup.style.display = "none";
      });

      // Optional: Auto-close after 10 seconds
      // setTimeout(() => popup.style.display = "none", 10000);
    }
  });
</script>

add this image in background !

Assistant
To set the image `/wp-content/uploads/2025/05/row-img_1.jpg` as a **background** of the popup instead of showing it inside “, you can update your HTML and CSS like this:

—

### ✅ **1. Remove the “ block** from your HTML

Delete this line:

<div class="popup-image">
  <img src="/wp-content/uploads/2025/05/row-img_1.jpg" alt="Emma Butler holding color samples" />
</div>

—

### ✅ **2. Add Background Image to `.popup` in your CSS**

Replace your existing `.popup` block with this updated version:

.popup {
  background: #fff url('/wp-content/uploads/2025/05/row-img_1.jpg') no-repeat bottom center;
  background-size: cover;
  width: 400px;
  max-width: 90%;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 0 25px rgba(0,0,0,0.3);
  position: relative;
  animation: fadeIn 0.4s ease;
}

—

### ✅ (Optional) If You Want a Separate Overlay + Content Layer

You can also wrap all content inside a background blur/overlay:

<div class="popup">
  <button class="close-btn">×</button>
  <div class="popup-inner">
    <!-- All your content here -->
  </div>
</div>

Then in CSS:

.popup {
  background: url('/wp-content/uploads/2025/05/row-img_1.jpg') no-repeat center center;
  background-size: cover;
  position: relative;
  padding: 0;
}

.popup-inner {
  background-color: rgba(255,255,255,0.9);
  padding: 20px;
}

Let me know if you want that advanced version too (semi-transparent white overlay over the background image).

User
.popup-content-over-image {
background: #fff url(/wp-content/uploads/2025/05/row-img_1.jpg) no-repeat bottom center;
background-size: cover;
height: 800px;
display: flex
;
flex-direction: column;
justify-content: space-between;
padding: 20px 20px 40px 20px;
background-position: top;
}

i want to control its size and position

Assistant
Great — you're almost there! To **fully control the size and position** of the background image in `.popup-content-over-image`, here’s a clean and flexible setup you can use:

—

### ✅ Updated CSS with Full Control

.popup-content-over-image {
    background-image: url(/wp-content/uploads/2025/05/row-img_1.jpg);
    background-repeat: no-repeat;
    background-size: cover; /* Options: contain | 100% 100% | auto */
    background-position: top center; /* You can use: top, center, bottom, left, right, or percentages */
    
    height: 800px;           /* Adjust height as needed */
    max-height: 100vh;       /* Optional: limit to viewport height */
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 20px 20px 40px 20px;
    position: relative;
    border-radius: 10px;     /* Optional */
    overflow: hidden;        /* Optional */
}

—

### 🔧 Background Controls Explained:

| Property | Example values | Notes |
|———————|———————————-|——-|
| `background-size` | `cover`, `contain`, `100% auto` | `cover` fills the box; `contain` fits without cropping |
| `background-position` | `top`, `center`, `bottom center`, `40% 20%` | You can finely tune it using percentages |
| `height` | `800px`, `60vh`, etc. | Adjust depending on layout needs |
| `padding` | Adds space inside for your text/buttons |

—

### 🧪 Example Tweaks

#### Want the image focused on bottom right?

background-position: bottom right;

#### Want to show full image without cropping?

background-size: contain;
background-repeat: no-repeat;
background-position: center;

#### Want a dark overlay over image?

.popup-content-over-image::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.4);
    z-index: 0;
}
.popup-content-over-image > * {
    position: relative;
    z-index: 1;
}

—

Let me know what exact effect you want (e.g., focus on Emma’s face, center crop, partial image showing with text over it), and I’ll give you the perfect settings.

User
📅 Saturday 24th May, 9am – 5pm
📍 House of Tiles Sandyford

instead of these icons i want to add image , make proper struckre of this div

Assistant
Sure! To replace the emoji icons (`📅` and `📍`) with **custom image icons** (like PNG or SVG), here’s a clean and proper HTML + CSS structure:

—

### ✅ **HTML Structure**

<div class="event-details">
  <div class="event-row">
    <img src="/wp-content/uploads/2025/05/icon-calendar.png" alt="Calendar Icon" class="event-icon">
    <strong>Saturday 24<sup>th</sup> May, 9am - 5pm</strong>
  </div>
  <div class="event-row">
    <img src="/wp-content/uploads/2025/05/icon-location.png" alt="Location Icon" class="event-icon">
    <span>House of Tiles Sandyford</span>
  </div>
</div>

> 🔁 Replace the image paths with actual Media Library links for your calendar and location icons.

—

### 🎨 **CSS**

.event-details {
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-size: 15px;
  color: #333;
}

.event-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.event-icon {
  width: 20px;
  height: 20px;
  object-fit: contain;
}

—

### ✅ Result
This structure:
– Aligns icons properly to the left
– Keeps text readable and accessible
– Easy to style and update

Let me know if you'd like the icons colored, or vertically aligned differently (e.g., top-aligned).

User
.cta-button {
display: block;
background: #c30072;
color: white;
padding: 12px 24px;
text-decoration: none;
font-weight: bold;
border-radius: 10px;
box-shadow: 0 6px 15px rgba(0, 0, 0, 0.2);
transition: background 0.3s ease;
font-size: 20px;
}

add shadow as given in image !

Assistant
To match the **strong pink glow shadow** like in your popup image, update your `.cta-button` CSS like this:

—

### ✅ Updated `.cta-button` CSS with glow shadow

.cta-button {
    display: block;
    background: #c30072;
    color: white;
    padding: 12px 24px;
    text-decoration: none;
    font-weight: bold;
    border-radius: 10px;
    font-size: 20px;
    transition: background 0.3s ease;

    /* Enhanced pink glow shadow */
    box-shadow:
      0 4px 20px rgba(195, 0, 114, 0.6),
      0 0 8px rgba(195, 0, 114, 0.5),
      0 0 12px rgba(195, 0, 114, 0.4);
}

—

### 💡 Optional Hover Effect
If you want the glow to intensify slightly on hover:

.cta-button:hover {
    background: #a1005d;
    box-shadow:
      0 6px 25px rgba(195, 0, 114, 0.7),
      0 0 10px rgba(195, 0, 114, 0.6),
      0 0 18px rgba(195, 0, 114, 0.5);
}

—

This will give your button that **glowing pink aura** just like the one shown in the image you uploaded.

Let me know if you'd like to animate the glow subtly or pulse it!

User
add box-shadow which is given on button cta
Assistant
From the image you provided, the CTA button (`Apply for your 1-on-1 design consultation`) has a **soft, offset drop shadow** that gives it a **floating/sticker look** — slightly grey and offset to the bottom-right.

—

### ✅ To match this **exact box-shadow**, use the following CSS:

.cta-button {
    display: block;
    background: #c30072;
    color: white;
    padding: 14px 24px;
    text-decoration: none;
    font-weight: bold;
    border-radius: 14px;
    font-size: 20px;
    transition: background 0.3s ease;

    /* Updated shadow to match the image */
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.4);
}

—

### 💡 Notes:
– The `0 8px 16px rgba(0, 0, 0, 0.4)` gives that **large soft black shadow** pushed down.
– You can tweak values if needed:

box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);

—

### ✅ Optional: Add Soft Border (if needed)
If you notice a slight light border inside the button in the image:

border: 1px solid rgba(255, 255, 255, 0.15);

Let me know if you'd also like it to **animate slightly on hover or press** (e.g. button lifts up or shrinks)!

User
×

DESIGN YOURDREAM BATHROOM
with Emma Butler of White Meadow Interiors

Join us at our Sandyford Showroom for an exclusive in-store event featuring 1-on-1 design consultations with Emma Butler and a live Bathroom Design Q&A session.

Saturday 24th May, 9am – 5pm

House of Tiles Sandyford

Apply for your 1-on-1 design consultation

<style>
.popup {
    background: #fff;
    width: 485px;
    max-width: 90%;
    overflow: hidden;
    box-shadow: 0 0 25px rgba(0, 0, 0, 0.3);
    position: relative;
    animation: fadeIn 0.4s ease;
	    margin: auto;
}
.popup-content-over-image {
    background: #fff url(/wp-content/uploads/2025/05/pop-up-bg.png) no-repeat;
    background-size: cover;
    height: 650px;
    display: flex
;
    flex-direction: column;
    justify-content: space-between;
     padding: 20px 40px 40px 40px;
    background-position: 20% 55%;
}
@keyframes fadeIn {
  from { opacity: 0; transform: scale(0.95); }
  to { opacity: 1; transform: scale(1); }
}

.close-btn {
    position: absolute;
    top: 5px;
    right: 8px;
    color: #fff;
    font-weight: 700;
    background: transparent;
    border: none;
    font-size: 45px;
    cursor: pointer;
}

.popup-header {
    display: flex
;
    justify-content: space-between;
    align-items: center;
    padding: 30px;
    background: #d8dedc;
}

.logo-left
{
  height: 40px;
}
.logo-right {    height: 90px;}
.popup-content {
  text-align: center;
}
.popup-heading{
	background-color:#1b313e;
	padding:10px;
}
.popup-heading h2 {
  color: #fff;
	    margin-bottom: 0px;
}

.subtext {
  color: #c30072;
  font-weight: bold;
  margin: 10px 0;
}

.info {
     color: #858585;
}

.event-details {
    display: flex;
    flex-direction: column;
    gap: 5px;
    font-size: 15px;
    color: #333;
    margin-top: 12px;
}

.event-row {
    display: flex
;
    align-items: center;
    gap: 10px;
    font-size: 18px;
    justify-content: center;
}

.event-icon {
  width: 20px;
  height: 20px;
  object-fit: contain;
}



.cta-button {
    display: block;
    background: #c30072;
    color: white;
    padding: 12px 24px;
    text-decoration: none;
    font-weight: bold;
    border-radius: 10px;
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.2);
    transition: background 0.3s ease;
    font-size: 20px;
	box-shadow: 0 8px 10px rgba(0, 0, 0, 0.7);
}

.cta-button:hover {
  background: #a1005d;
}
</style>
<script>
document.addEventListener("DOMContentLoaded", function () {
    const popup = document.getElementById("popup-overlay");
    const closeBtn = document.querySelector(".close-btn");

    if (popup && closeBtn) {
      closeBtn.addEventListener("click", () => {
        popup.style.display = "none";
      });

      // Optional: Auto-close after 10 seconds
      // setTimeout(() => popup.style.display = "none", 10000);
    }
  });
</script>

All set on desktop , now just make it responsive ! dont chnage anything till 767!
only mobile from 767px

aslo , on one page it will open only at once !

if opened on any page it will not show again !

just do it carefully !

Assistant
Perfect! Based on your current setup, I’ll help you:

—

## ✅ **1. Make the popup responsive below `767px`**
👉 Only apply styles **below 767px** using a media query.

## ✅ **2. Ensure the popup shows only once per user session (per visit)**
👉 We'll use `sessionStorage` to track if the popup has already been seen.

—

### ✅ Add This CSS for Mobile Responsiveness (Below 767px)

Append this **after your existing styles**:

@media (max-width: 767px) {
  .popup {
    width: 90%;
  }

  .popup-header {
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 20px;
  }

  .logo-left,
  .logo-right {
    height: 50px;
  }

  .popup-heading h2 {
    font-size: 20px;
    line-height: 1.2;
  }

  .popup-content-over-image {
    height: auto;
    padding: 20px;
    background-position: center;
  }

  .event-row {
    font-size: 16px;
    justify-content: flex-start;
  }

  .cta-button {
    font-size: 18px;
    padding: 10px 20px;
  }
}

—

### ✅ Replace Your JavaScript with This (To Show Once per Session)

Replace your current “ block with this upgraded version:

<script>
  document.addEventListener("DOMContentLoaded", function () {
    const popup = document.getElementById("popup-overlay");
    const closeBtn = document.querySelector(".close-btn");

    // Show popup only if not already shown in this session
    if (!sessionStorage.getItem("popupShown") && popup) {
      popup.style.display = "flex";

      // Mark as shown
      sessionStorage.setItem("popupShown", "true");
    } else if (popup) {
      popup.style.display = "none";
    }

    // Close button logic
    if (popup && closeBtn) {
      closeBtn.addEventListener("click", () => {
        popup.style.display = "none";
      });
    }
  });
</script>

—

### ✅ Summary

✅ Popup is **fully responsive under 767px**
✅ Popup will **only show once per session (across all pages)**
✅ Nothing changed for desktop styles

Let me know if you want the "show once" logic to persist even after refresh or across days (via cookies instead of `sessionStorage`).

User
#popup-overlay {
position: fixed;
top: 0;
left: 0;
height: 100vh;
width: 100%;
background: rgba(0,0,0,0.6);
z-index: 9999;
display: flex;
justify-content: center;
align-items: center;
}

.popup {
background: #fff;
width: 485px;
max-width: 90%;
overflow: hidden;
box-shadow: 0 0 25px rgba(0, 0, 0, 0.3);
position: relative;
animation: fadeIn 0.4s ease;
margin: auto;
}
.popup-content-over-image {
background: #fff url(/wp-content/uploads/2025/05/pop-up-bg.png) no-repeat;
background-size: cover;
height: 650px;
display: flex
;
flex-direction: column;
justify-content: space-between;
padding: 20px 40px 40px 40px;
background-position: 20% 55%;
}
@keyframes fadeIn {
from { opacity: 0; transform: scale(0.95); }
to { opacity: 1; transform: scale(1); }
}

.close-btn {
position: absolute;
top: 5px;
right: 8px;
color: #fff;
font-weight: 700;
background: transparent;
border: none;
font-size: 45px;
cursor: pointer;
}

.popup-header {
display: flex
;
justify-content: space-between;
align-items: center;
padding: 30px;
background: #d8dedc;
}

.logo-left
{
height: 40px;
}
.logo-right { height: 90px;}
.popup-content {
text-align: center;
}
.popup-heading{
background-color:#1b313e;
padding:10px;
}
.popup-heading h2 {
color: #fff;
margin-bottom: 0px;
}

.subtext {
color: #c30072;
font-weight: bold;
margin: 10px 0;
}

.info {
color: #858585;
}
.event-details {
display: flex
;
flex-direction: column;
gap: 5px;
font-size: 15px;
color: #333;
margin-top: 12px;
align-items: center;
}

.event-row {
display: flex
;
align-items: center;
gap: 10px;
font-size: 18px;
justify-content: center;
}

.event-icon {
width: 20px;
height: 20px;
object-fit: contain;
}

.cta-button {
display: block;
background: #c30072;
color: white;
padding: 12px 24px;
text-decoration: none;
font-weight: bold;
border-radius: 10px;
box-shadow: 0 6px 15px rgba(0, 0, 0, 0.2);
transition: background 0.3s ease;
font-size: 20px;
box-shadow: 0 8px 10px rgba(0, 0, 0, 0.7);
}

.cta-button:hover {
background: #a1005d;
}
@media (max-width: 767px) {
.popup {
width: 90%;
overflow:auto !important;
}

.popup-header {
flex-direction: column;
align-items: center;
gap: 10px;
padding: 20px;
}

.logo-left{
height: 30px;
}
.logo-right{
height: 75px;
}
.popup-heading h2 {
font-size: 20px;
line-height: 1.2;
}

.popup-content-over-image {
height: 600px;

padding: 20px;
background-position: center;
}

.event-row {
font-size: 14px;

justify-content: flex-start;
}

.cta-button {
font-size: 18px;
padding: 10px 20px;
}
}

make it scroll !

if content exceeds the height
after:1024px

Assistant
To make the popup **scrollable when the content height exceeds 1024px**, you should:

### ✅ Apply a `max-height` + `overflow: auto` to the `.popup` container after 1024px screen height.

Here’s exactly how to do it:

—

### ✅ **Step 1: Add Scroll Logic for Viewports Taller than 1024px**

Add this CSS block after your existing styles:

@media (min-height: 1025px) {
  .popup {
    max-height: 90vh;
    overflow-y: auto;
  }
}

This ensures:
– The popup will **not exceed 90% of the viewport height**.
– **Scrollbars will appear** only if the content inside `.popup` is too tall.

—

### ✅ **Step 2 (Optional): Smoother Scroll Behavior**

If you want the scroll area to feel more natural, add:

.popup {
  scroll-behavior: smooth;
}

—

### ✅ Final Result:
– On mobile: Fully responsive under 767px ✅
– On desktop: Scrolls only if the content exceeds 1024px height ✅
– The styling and layout remain **unchanged otherwise** ✅

Let me know if you want to style the scrollbar (e.g. slim, colored) or make it modal-style with page background locked!

User
#popup-overlay {
position: fixed;
top: 0;
left: 0;
height: 100vh;
width: 100%;
background: rgba(0,0,0,0.6);
z-index: 9999;
display: flex;
justify-content: center;
align-items: center;
}

.popup {
background: #fff;
width: 485px;
max-width: 90%;
overflow: hidden;
box-shadow: 0 0 25px rgba(0, 0, 0, 0.3);
position: relative;
animation: fadeIn 0.4s ease;
margin: auto;
}
.popup-content-over-image {
background: #fff url(/wp-content/uploads/2025/05/pop-up-bg.png) no-repeat;
background-size: cover;
height: 650px;
display: flex
;
flex-direction: column;
justify-content: space-between;
padding: 20px 40px 40px 40px;
background-position: 20% 55%;
}
@keyframes fadeIn {
from { opacity: 0; transform: scale(0.95); }
to { opacity: 1; transform: scale(1); }
}

.close-btn {
position: absolute;
top: 5px;
right: 8px;
color: #fff;
font-weight: 700;
background: transparent;
border: none;
font-size: 45px;
cursor: pointer;
}

.popup-header {
display: flex
;
justify-content: space-between;
align-items: center;
padding: 30px;
background: #d8dedc;
}

.logo-left
{
height: 40px;
}
.logo-right { height: 90px;}
.popup-content {
text-align: center;
}
.popup-heading{
background-color:#1b313e;
padding:10px;
}
.popup-heading h2 {
color: #fff;
margin-bottom: 0px;
}

.subtext {
color: #c30072;
font-weight: bold;
margin: 10px 0;
}

.info {
color: #858585;
}
.event-details {
display: flex
;
flex-direction: column;
gap: 5px;
font-size: 15px;
color: #333;
margin-top: 12px;
align-items: center;
}

.event-row {
display: flex
;
align-items: center;
gap: 10px;
font-size: 18px;
justify-content: center;
}

.event-icon {
width: 20px;
height: 20px;
object-fit: contain;
}

.cta-button {
display: block;
background: #c30072;
color: white;
padding: 12px 24px;
text-decoration: none;
font-weight: bold;
border-radius: 10px;
box-shadow: 0 6px 15px rgba(0, 0, 0, 0.2);
transition: background 0.3s ease;
font-size: 20px;
box-shadow: 0 8px 10px rgba(0, 0, 0, 0.7);
}

.cta-button:hover {
background: #a1005d;
}
@media (max-width: 767px) {
.popup {
width: 90%;
overflow:auto !important;
}

.popup-header {
flex-direction: column;
align-items: center;
gap: 10px;
padding: 20px;
}

.logo-left{
height: 30px;
}
.logo-right{
height: 75px;
}
.popup-heading h2 {
font-size: 20px;
line-height: 1.2;
}

.popup-content-over-image {
height: 600px;

padding: 20px;
background-position: center;
}

.event-row {
font-size: 14px;

justify-content: flex-start;
}

.cta-button {
font-size: 18px;
padding: 10px 20px;
}
}

make it scroll !

if content exceeds the height
max:1024px

Assistant
To make your popup **scrollable** if content exceeds a maximum height (e.g. `1024px`), you'll need to:

—

### ✅ **1. Add `max-height` and scroll behavior to `.popup`**

Update the `.popup` CSS like this:

.popup {
  background: #fff;
  width: 485px;
  max-width: 90%;
  max-height: 1024px; /* 🚀 Limit popup height */
  overflow-y: auto;   /* 🧭 Enable scroll if needed */
  box-shadow: 0 0 25px rgba(0, 0, 0, 0.3);
  position: relative;
  animation: fadeIn 0.4s ease;
  margin: auto;
  scrollbar-width: thin; /* Firefox scroll */
  scrollbar-color: #ccc transparent;
}

—

### ✅ **2. Optional: Style scrollbars (WebKit browsers like Chrome)**

Add this to make the scrollbar cleaner:

.popup::-webkit-scrollbar {
  width: 8px;
}

.popup::-webkit-scrollbar-track {
  background: transparent;
}

.popup::-webkit-scrollbar-thumb {
  background-color: rgba(0, 0, 0, 0.3);
  border-radius: 4px;
}

—

### ✅ ✅ Now you have:

– A **max height of 1024px**
– **Smooth vertical scrolling** only when needed
– Responsive styling remains intact

Let me know if you want scroll only for mobile or want to add smooth scrolling animation too.

User
#popup-overlay {
position: fixed;
top: 0;
left: 0;
height: 100vh;
width: 100%;
background: rgba(0,0,0,0.6);
z-index: 9999;
display: flex;
justify-content: center;
align-items: center;
}

.popup {
background: #fff;
width: 485px;
max-width: 90%;
overflow: hidden;
box-shadow: 0 0 25px rgba(0, 0, 0, 0.3);
position: relative;
animation: fadeIn 0.4s ease;
margin: auto;
}
.popup-content-over-image {
background: #fff url(/wp-content/uploads/2025/05/pop-up-bg.png) no-repeat;
background-size: cover;
height: 650px;
display: flex
;
flex-direction: column;
justify-content: space-between;
padding: 20px 40px 40px 40px;
background-position: 20% 55%;
}
@keyframes fadeIn {
from { opacity: 0; transform: scale(0.95); }
to { opacity: 1; transform: scale(1); }
}

.close-btn {
position: absolute;
top: 5px;
right: 8px;
color: #fff;
font-weight: 700;
background: transparent;
border: none;
font-size: 45px;
cursor: pointer;
}

.popup-header {
display: flex
;
justify-content: space-between;
align-items: center;
padding: 30px;
background: #d8dedc;
}

.logo-left
{
height: 40px;
}
.logo-right { height: 90px;}
.popup-content {
text-align: center;
}
.popup-heading{
background-color:#1b313e;
padding:10px;
}
.popup-heading h2 {
color: #fff;
margin-bottom: 0px;
}

.subtext {
color: #c30072;
font-weight: bold;
margin: 10px 0;
}

.info {
color: #858585;
}
.event-details {
display: flex
;
flex-direction: column;
gap: 5px;
font-size: 15px;
color: #333;
margin-top: 12px;
align-items: center;
}

.event-row {
display: flex
;
align-items: center;
gap: 10px;
font-size: 18px;
justify-content: center;
}

.event-icon {
width: 20px;
height: 20px;
object-fit: contain;
}

.cta-button {
display: block;
background: #c30072;
color: white;
padding: 12px 24px;
text-decoration: none;
font-weight: bold;
border-radius: 10px;
box-shadow: 0 6px 15px rgba(0, 0, 0, 0.2);
transition: background 0.3s ease;
font-size: 20px;
box-shadow: 0 8px 10px rgba(0, 0, 0, 0.7);
}

.cta-button:hover {
background: #a1005d;
}
@media (max-width: 767px) {
.popup {
width: 90%;
overflow:auto !important;
}

.popup-header {
flex-direction: column;
align-items: center;
gap: 10px;
padding: 20px;
}

.logo-left{
height: 30px;
}
.logo-right{
height: 75px;
}
.popup-heading h2 {
font-size: 20px;
line-height: 1.2;
}

.popup-content-over-image {
height: 600px;

padding: 20px;
background-position: center;
}

.event-row {
font-size: 14px;

justify-content: flex-start;
}

.cta-button {
font-size: 18px;
padding: 10px 20px;
}
}

make it scroll !

if content exceeds the height
max screen :1024px;

fix height according to which is feasible and best !

Assistant
To ensure your popup becomes **scrollable if content exceeds the screen height**, especially on devices up to `1024px`, and still looks visually nice:

—

### ✅ ✅ Final, Clean, Scrollable & Responsive Fix

#### 🔧 Update your CSS like this:

#popup-overlay {
  position: fixed;
  top: 0;
  left: 0;
  height: 100vh;
  width: 100%;
  background: rgba(0, 0, 0, 0.6);
  z-index: 9999;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow-y: auto;
  padding: 20px; /* So content doesn't touch screen edges */
}

.popup {
  background: #fff;
  width: 485px;
  max-width: 90%;
  max-height: 95vh; /* Important: limits height on any screen */
  overflow-y: auto;
  box-shadow: 0 0 25px rgba(0, 0, 0, 0.3);
  position: relative;
  animation: fadeIn 0.4s ease;
  margin: auto;
  border-radius: 10px;
}

—

### 📱 Mobile / Tablet Adjustments (`max-width: 1024px` and `767px`)

@media (max-width: 1024px) {
  .popup {
    max-height: 90vh;
    overflow-y: auto;
  }

  .popup-content-over-image {
    height: auto; /* Let it adjust naturally */
    background-position: center center;
    padding: 20px;
  }
}

@media (max-width: 767px) {
  .popup {
    width: 90%;
    overflow-y: auto;
  }

  .popup-header {
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 20px;
  }

  .logo-left {
    height: 30px;
  }

  .logo-right {
    height: 75px;
  }

  .popup-heading h2 {
    font-size: 20px;
    line-height: 1.2;
  }

  .popup-content-over-image {
    padding: 20px;
    height: auto;
    background-position: center center;
  }

  .event-row {
    font-size: 14px;
    justify-content: flex-start;
  }

  .cta-button {
    font-size: 18px;
    padding: 10px 20px;
  }
}

—

### ✅ Final Notes:
– **`max-height: 90vh`** ensures popup never exceeds screen height.
– **`overflow-y: auto`** enables vertical scroll **only when needed**.
– **`padding: 20px` on overlay** prevents mobile popups from touching screen edges.
– This works seamlessly from desktop down to mobile.

Let me know if you want to add **scrollbar styling** too for better aesthetics.

User
<script>
document.addEventListener("DOMContentLoaded", function () {
    const popup = document.getElementById("popup-overlay");
    const closeBtn = document.querySelector(".close-btn");

    // Show popup only if not already shown in this session
    if (!sessionStorage.getItem("popupShown") && popup) {
      popup.style.display = "flex";

      // Mark as shown
      sessionStorage.setItem("popupShown", "true");
    } else if (popup) {
      popup.style.display = "none";
    }

    // Close button logic
    if (popup && closeBtn) {
      closeBtn.addEventListener("click", () => {
        popup.style.display = "none";
      });
    }
  });
</script>

this script is not working as popup is visible for 1 second on everypage , infact i've not visited on that page !

Assistant
Thanks for the context! Just to clarify so I can help you best:

1. Are you loading this popup code (PHP and JS) on **every page**, or just some pages?
2. Should the popup be considered 'seen' as soon as it's loaded anywhere, or **only after the user closes it**?
3. Do you want this to reset per session (using sessionStorage) or persist longer (like 24 hours using cookies)?

Let me know and I’ll adjust the logic precisely.

User
<script>
document.addEventListener("DOMContentLoaded", function () {
    const popup = document.getElementById("popup-overlay");
    const closeBtn = document.querySelector(".close-btn");

    // Show popup only if not already shown in this session
    if (!sessionStorage.getItem("popupShown") && popup) {
      popup.style.display = "flex";

      // Mark as shown
      sessionStorage.setItem("popupShown", "true");
    } else if (popup) {
      popup.style.display = "none";
    }

    // Close button logic
    if (popup && closeBtn) {
      closeBtn.addEventListener("click", () => {
        popup.style.display = "none";
      });
    }
  });
</script>

this script is not working as popup is visible for only for 1 second on everypage currently , infact i've not visited on that page !

please do something ,
I want it will show only once on any page !
if if has shown on page once than it will not show again on the same page , but yes , it will be visible for all rest of the pages , where user not visited !

do it carefully !

Assistant
Thank you for the clarification — here's what you're asking for:

> ✅ **Show the popup once per page** (only the first time the user visits that page).
> ✅ **If the user visits other pages**, the popup should show there too (only once per page).
> ✅ After it's shown once on a page, **never show it again on that same page** during the session.

—

## ✅ Updated JavaScript Solution (Per-Page Session Logic)

This solution stores a separate `sessionStorage` flag **per page**, based on the current URL:

<script>
  document.addEventListener("DOMContentLoaded", function () {
    const popup = document.getElementById("popup-overlay");
    const closeBtn = document.querySelector(".close-btn");

    if (!popup) return;

    // Use pathname as a key, so popup is tracked per page
    const pageKey = "popupShown_" + window.location.pathname;

    if (!sessionStorage.getItem(pageKey)) {
      // Show popup
      popup.style.display = "flex";

      // Set shown for this page
      sessionStorage.setItem(pageKey, "true");
    } else {
      // Already shown for this page
      popup.style.display = "none";
    }

    // Allow user to close the popup manually
    if (closeBtn) {
      closeBtn.addEventListener("click", () => {
        popup.style.display = "none";
      });
    }
  });
</script>

—

## ✅ How it Works:
– `window.location.pathname` gives the current page path (e.g. `/about`, `/contact`)
– `sessionStorage.setItem("popupShown_/about", "true")` is unique per path
– So the popup:
– Shows only once on `/about`
– Shows only once on `/services`
– Shows only once on `/` (homepage)

—

Let me know if you want this to work **across sessions** using cookies instead of `sessionStorage`.

User
<script>
document.addEventListener("DOMContentLoaded", function () {
    const popup = document.getElementById("popup-overlay");
    const closeBtn = document.querySelector(".close-btn");

    // Show popup only if not already shown in this session
    if (!sessionStorage.getItem("popupShown") && popup) {
      popup.style.display = "flex";

      // Mark as shown
      sessionStorage.setItem("popupShown", "true");
    } else if (popup) {
      popup.style.display = "none";
    }

    // Close button logic
    if (popup && closeBtn) {
      closeBtn.addEventListener("click", () => {
        popup.style.display = "none";
      });
    }
  });
</script>

this script is not working as popup is visible for only for 1 second on everypage currently , infact i've not visited on that page !

please do something ,
I want it will show only once on any page of the website , than it will not visible to the same user , do it !!

do it carefully !

Assistant
Thanks — I understand the issue now:

> ✅ You want the popup to **appear only once** to the user on **any page**, and then **never show again** in the same session.

—

### ❌ The problem:
Your popup is briefly showing on every page for ~1 second because the `sessionStorage.setItem()` happens **after** the popup renders — not **after user closes** it.

—

### ✅ The correct logic:
– Only show popup if `popupShown` is **not set**.
– Only set `popupShown = true` **when the user closes** the popup.

—

### ✅ ✅ FIXED JavaScript:
Replace your “ with this **carefully revised** version:

<script>
  document.addEventListener("DOMContentLoaded", function () {
    const popup = document.getElementById("popup-overlay");
    const closeBtn = document.querySelector(".close-btn");

    // Only show popup if it hasn't been closed before
    const hasSeenPopup = sessionStorage.getItem("popupShown");

    if (!hasSeenPopup && popup) {
      popup.style.display = "flex";
    } else if (popup) {
      popup.style.display = "none";
    }

    // Close button logic
    if (popup && closeBtn) {
      closeBtn.addEventListener("click", () => {
        popup.style.display = "none";

        // Now mark as seen
        sessionStorage.setItem("popupShown", "true");
      });
    }
  });
</script>

—

### 🧪 How it works:
– The popup is **only displayed** if the user **has not closed it before**.
– Once the user closes it, the flag is stored and persists across the whole session (tabs/pages).
– It will **not flash or appear again** unless they start a new session.

—

### ✅ Want it to remember longer than session?
Use this instead of `sessionStorage`:

localStorage.setItem("popupShown", "true");

Let me know if you want that version too (for 24-hour or permanent memory).

User
working good , but still one isse , it showing for few mili seconds when we are loading website !

please olve it to

Assistant
Great to hear it’s **almost working!** The last issue — where the popup flashes for a few milliseconds — happens because:

> ❗ The popup HTML is rendered **before JavaScript has a chance to hide it**.

—

### ✅ To completely fix the **flash on load**, we’ll hide it **by default using CSS**, then **only show it with JavaScript if needed**.

—

### ✅ Step-by-step Fix:

#### ✅ 1. **Add this to your CSS** to hide the popup by default:

#popup-overlay {
  display: none; /* hide initially */
}

> You're probably showing it by default using `display: flex`, which causes the flicker.

—

#### ✅ 2. JavaScript now controls when to show it:
Make sure this part stays as-is in your JS:

popup.style.display = "flex";

So now:
– **Initial state** = hidden
– **JS reveals it only when needed** = no flicker

—

### ✅ Result:
No more flicker. The popup won’t appear at all unless the user hasn't seen it **and JS decides to show it**.

Let me know if you'd like a fade-in animation added next.

User
give me full script!
Assistant
Absolutely! Here's the **complete solution**, carefully combining CSS and JavaScript to:

– ✅ Prevent any flicker or flash
– ✅ Show the popup **only once per session**
– ✅ Only display it **after JavaScript decides it's needed**

—

### ✅ Full CSS (Add to your CSS file or “ tag)

#popup-overlay {
  display: none; /* Hide by default to prevent flicker */
  position: fixed;
  top: 0;
  left: 0;
  height: 100vh;
  width: 100%;
  background: rgba(0, 0, 0, 0.6);
  z-index: 9999;
  justify-content: center;
  align-items: center;
}

—

### ✅ Full JavaScript (Place before “ or via `footer.php`)

<script>
  document.addEventListener("DOMContentLoaded", function () {
    const popup = document.getElementById("popup-overlay");
    const closeBtn = document.querySelector(".close-btn");

    // Check if popup has been shown in session
    const hasSeenPopup = sessionStorage.getItem("popupShown");

    if (!hasSeenPopup && popup) {
      // Show the popup only after DOM is ready and condition passes
      popup.style.display = "flex";
    }

    // Close button logic
    if (popup && closeBtn) {
      closeBtn.addEventListener("click", () => {
        popup.style.display = "none";
        sessionStorage.setItem("popupShown", "true"); // Now mark it as shown
      });
    }
  });
</script>

—

### 🔒 This solution guarantees:
– ✅ No flickering on page load
– ✅ Popup appears only once per user session
– ✅ Works across all pages — **no matter where the user sees it first**

Let me know if you want this behavior to persist longer (e.g., for a day) using cookies instead of sessionStorage.

User
<script>
document.addEventListener("DOMContentLoaded", function () {
    const popup = document.getElementById("popup-overlay");
    const closeBtn = document.querySelector(".close-btn");

    // Check if popup has been shown in session
    const hasSeenPopup = sessionStorage.getItem("popupShown");

    if (!hasSeenPopup && popup) {
      // Show the popup only after DOM is ready and condition passes
      popup.style.display = "flex";
    }

    // Close button logic
    if (popup && closeBtn) {
      closeBtn.addEventListener("click", () => {
        popup.style.display = "none";
        sessionStorage.setItem("popupShown", "true"); // Now mark it as shown
      });
    }
  });
</script>

working but , add ne more functionality that , if user closes or not !
but its once on website to particular user than it will not be shown again !

Assistant
Great — you're almost there!

Now, you want to make sure that:

> ✅ The popup should be shown **only once per user** per session, **even if the user doesn’t close it**.

—

### ✅ Problem:
In your current logic, the popup is only marked as “seen” **when the user closes it manually**.

—

### ✅ Solution:
We will **mark the popup as seen immediately when it’s shown**, not only when the user clicks close.

—

### ✅ ✅ Final Working Script:

<script>
  document.addEventListener("DOMContentLoaded", function () {
    const popup = document.getElementById("popup-overlay");
    const closeBtn = document.querySelector(".close-btn");

    // Check if popup has already been shown
    const hasSeenPopup = sessionStorage.getItem("popupShown");

    if (!hasSeenPopup && popup) {
      // Show it once and immediately mark it as shown
      popup.style.display = "flex";
      sessionStorage.setItem("popupShown", "true");
    }

    // Close popup if user clicks the X
    if (popup && closeBtn) {
      closeBtn.addEventListener("click", () => {
        popup.style.display = "none";
      });
    }
  });
</script>

—

### ✅ Why this works:
– The popup is now **instantly marked as "seen"** the moment it appears.
– This means:
– ✅ It will **never reappear again** during the session.
– ✅ Even if the user doesn’t close it, the logic prevents it from showing again on any page.

Let me know if you'd like to upgrade this to remember across sessions (e.g. for a week or a day using cookies).

User
no , not working if I dont close it , and open it on new tab , but still its showing !
Assistant
Thanks! That confirms the issue.

### ❗ Problem Recap:
You're using `sessionStorage`, which:
– 🔁 **Resets for each new browser tab** (even within the same session)
– ❌ Doesn't persist between tabs, which is why the popup **reappears on new tabs** if not closed

—

### ✅ ✅ Best Fix: Use `localStorage` instead

`localStorage` persists across **all tabs and pages** (and sessions until cleared). This will show the popup **only once per user**, even if they:
– open new tabs
– reload the page
– navigate around the site

—

### ✅ Final JavaScript Using `localStorage`

<script>
  document.addEventListener("DOMContentLoaded", function () {
    const popup = document.getElementById("popup-overlay");
    const closeBtn = document.querySelector(".close-btn");

    // Check if popup has already been shown (across tabs)
    const hasSeenPopup = localStorage.getItem("popupShown");

    if (!hasSeenPopup && popup) {
      // Show popup and mark it as seen immediately
      popup.style.display = "flex";
      localStorage.setItem("popupShown", "true");
    }

    if (popup && closeBtn) {
      closeBtn.addEventListener("click", () => {
        popup.style.display = "none";
      });
    }
  });
</script>

—

### ✅ Summary
| Feature | `sessionStorage` | `localStorage` ✅ |
|—————-|——————|——————-|
| Shared across tabs | ❌ No | ✅ Yes |
| Remembers across pages | ✅ Yes | ✅ Yes |
| Remembers after refresh | ✅ Yes | ✅ Yes |
| You want this | ❌ | ✅ |

Let me know if you want it to expire after X hours or days — I can make that happen too!

User
×

DESIGN YOURDREAM BATHROOM
with Emma Butler of White Meadow Interiors

Join us at our Sandyford Showroom for an exclusive in-store event featuring 1-on-1 design consultations with Emma Butler and a live Bathroom Design Q&A session.

Saturday 24th May, 9am – 5pm

House of Tiles Sandyford

Apply for your 1-on-1 design consultation

<style>
#popup-overlay {
  position: fixed;
  top: 0;
  left: 0;
  height: 100vh;
  width: 100%;
  background: rgba(0, 0, 0, 0.6);
  z-index: 9999;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow-y: auto;
  padding: 20px; /* So content doesn't touch screen edges */
}

.popup {
  background: #fff;
  width: 485px;
  max-width: 90%;
  max-height: 95vh; /* Important: limits height on any screen */
  overflow-y: auto;
  box-shadow: 0 0 25px rgba(0, 0, 0, 0.3);
  position: relative;
  animation: fadeIn 0.4s ease;
  margin: auto;
  border-radius: 10px;
}

.popup-content-over-image {
    background: #fff url(/wp-content/uploads/2025/05/pop-up-bg.png) no-repeat;
    background-size: cover;
    height: 600px;
    display: flex
;
    flex-direction: column;
    justify-content: space-between;
    padding: 20px 40px 30px 40px;
    background-position: 20% 55%;
}
@keyframes fadeIn {
  from { opacity: 0; transform: scale(0.95); }
  to { opacity: 1; transform: scale(1); }
}

.close-btn {
    position: absolute;
    top: 5px;
    right: 8px;
    color: #fff;
    font-weight: 700;
    background: transparent;
    border: none;
    font-size: 45px;
    cursor: pointer;
}

.popup-header {
    display: flex
;
    justify-content: space-between;
    align-items: center;
    padding: 30px;
    background: #d8dedc;
}

.logo-left
{
  height: 40px;
}
.logo-right {    height: 90px;}
.popup-content {
  text-align: center;
}
.popup-heading{
	background-color:#1b313e;
	padding:10px;
}
.popup-heading h2 {
  color: #fff;
	    margin-bottom: 0px;
}

.subtext {
  color: #c30072;
  font-weight: bold;
  margin: 10px 0;
}

.info {
     color: #858585;
}
.event-details {
    display: flex
;
    flex-direction: column;
    gap: 5px;
    font-size: 15px;
    color: #333;
    margin-top: 12px;
    align-items: center;
}

.event-row {
    display: flex
;
    align-items: center;
    gap: 10px;
    font-size: 18px;
    justify-content: center;
}

.event-icon {
  width: 20px;
  height: 20px;
  object-fit: contain;
}



.cta-button {
    display: block;
    background: #c30072;
    color: white;
    padding: 12px 24px;
    text-decoration: none;
    font-weight: bold;
    border-radius: 10px;
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.2);
    transition: background 0.3s ease;
    font-size: 20px;
	box-shadow: 0 8px 10px rgba(0, 0, 0, 0.7);
}

.cta-button:hover {
  background: #a1005d;
}
#popup-overlay {
  display: none; /* hide initially */
}



@media (max-width: 767px) {
  .popup {
    max-height: 90vh;
    overflow-y: auto;
		    width: 100%;
  }

  .popup-header {
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 20px;
  }

  .logo-left {
    height: 30px;
  }

  .logo-right {
    height: 75px;
  }

  .popup-heading h2 {
    font-size: 20px;
    line-height: 1.2;
  }

  .popup-content-over-image {
    padding: 20px;
    height: 550px;
background-position: center;
  }

  .event-row {
    font-size: 14px;
    justify-content: flex-start;
  }

  .cta-button {
    font-size: 18px;
    padding: 10px 20px;
  }
}
</style>
<script>
document.addEventListener("DOMContentLoaded", function () {
    const popup = document.getElementById("popup-overlay");
    const closeBtn = document.querySelector(".close-btn");

    // Check if popup has already been shown (across tabs)
    const hasSeenPopup = localStorage.getItem("popupShown");

    if (!hasSeenPopup && popup) {
      // Show popup and mark it as seen immediately
      popup.style.display = "flex";
      localStorage.setItem("popupShown", "true");
    }

    if (popup && closeBtn) {
      closeBtn.addEventListener("click", () => {
        popup.style.display = "none";
      });
    }
  });
</script>
Assistant
✅ Your code is **almost perfect** — it shows the popup only once across tabs using `localStorage`, and the styling is responsive and clean.
But let me help you clean it up **just a bit more carefully** so it's fully reliable and avoids any hidden conflicts:

—

### ✅ Final Improved Version (Just a few key tweaks)

#### 🧼 1. **Avoid duplicate `#popup-overlay` declaration in CSS**

Your CSS has **two definitions** of `#popup-overlay`, which may confuse the browser.

✅ Fix: Combine them like this:

#popup-overlay {
  display: none; /* hide initially */
  position: fixed;
  top: 0;
  left: 0;
  height: 100vh;
  width: 100%;
  background: rgba(0, 0, 0, 0.6);
  z-index: 9999;
  justify-content: center;
  align-items: center;
  overflow-y: auto;
  padding: 20px;
}

—

#### ✅ 2. Use a `body` class fallback to prevent flashes *(optional but ideal)*

In your “, wrap the popup display logic in a delay (or render on `window.load`) to ensure the layout is stable **before applying `display: flex`**.

But since you've already used `display: none` in CSS, you're 90% safe. So **this next fix isn't required** but adds stability:

window.addEventListener("load", function () {
  const popup = document.getElementById("popup-overlay");
  const closeBtn = document.querySelector(".close-btn");
  const hasSeenPopup = localStorage.getItem("popupShown");

  if (!hasSeenPopup && popup) {
    popup.style.display = "flex";
    localStorage.setItem("popupShown", "true");
  }

  if (popup && closeBtn) {
    closeBtn.addEventListener("click", () => {
      popup.style.display = "none";
    });
  }
});

—

### ✅ Summary of What You’ve Achieved

| Feature | ✅ Status |
|———————————-|——————|
| Only visible for certain IPs | ✅ Done in PHP |
| Only shows once per user | ✅ Using `localStorage` |
| Works across all pages/tabs | ✅ Yes |
| Responsive on all screen sizes | ✅ Yes |
| Flicker-free loading | ✅ Hidden by default |

—

Let me know if you'd like the popup to:
– Reappear **after X days**
– Be shown **only on homepage**
– Trigger after **delay or scroll**

I’ll give you that version too.

User
×

DESIGN YOURDREAM BATHROOM
with Emma Butler of White Meadow Interiors

Join us at our Sandyford Showroom for an exclusive in-store event featuring 1-on-1 design consultations with Emma Butler and a live Bathroom Design Q&A session.

Saturday 24th May, 9am – 5pm

House of Tiles Sandyford

Apply for your 1-on-1 design consultation

<style>
#popup-overlay {
  position: fixed;
  top: 0;
  left: 0;
  height: 100vh;
  width: 100%;
  background: rgba(0, 0, 0, 0.6);
  z-index: 9999;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow-y: auto;
  padding: 20px; /* So content doesn't touch screen edges */
}

.popup {
  background: #fff;
  width: 485px;
  max-width: 90%;
  max-height: 95vh; /* Important: limits height on any screen */
  overflow-y: auto;
  box-shadow: 0 0 25px rgba(0, 0, 0, 0.3);
  position: relative;
  animation: fadeIn 0.4s ease;
  margin: auto;
  border-radius: 10px;
}

.popup-content-over-image {
    background: #fff url(/wp-content/uploads/2025/05/pop-up-bg.png) no-repeat;
    background-size: cover;
    height: 600px;
    display: flex
;
    flex-direction: column;
    justify-content: space-between;
    padding: 20px 40px 30px 40px;
    background-position: 20% 55%;
}
@keyframes fadeIn {
  from { opacity: 0; transform: scale(0.95); }
  to { opacity: 1; transform: scale(1); }
}

.close-btn {
    position: absolute;
    top: 5px;
    right: 8px;
    color: #fff;
    font-weight: 700;
    background: transparent;
    border: none;
    font-size: 45px;
    cursor: pointer;
}

.popup-header {
    display: flex
;
    justify-content: space-between;
    align-items: center;
    padding: 30px;
    background: #d8dedc;
}

.logo-left
{
  height: 40px;
}
.logo-right {    height: 90px;}
.popup-content {
  text-align: center;
}
.popup-heading{
	background-color:#1b313e;
	padding:10px;
}
.popup-heading h2 {
  color: #fff;
	    margin-bottom: 0px;
}

.subtext {
  color: #c30072;
  font-weight: bold;
  margin: 10px 0;
}

.info {
     color: #858585;
}
.event-details {
    display: flex
;
    flex-direction: column;
    gap: 5px;
    font-size: 15px;
    color: #333;
    margin-top: 12px;
    align-items: center;
}

.event-row {
    display: flex
;
    align-items: center;
    gap: 10px;
    font-size: 18px;
    justify-content: center;
}

.event-icon {
  width: 20px;
  height: 20px;
  object-fit: contain;
}



.cta-button {
    display: block;
    background: #c30072;
    color: white;
    padding: 12px 24px;
    text-decoration: none;
    font-weight: bold;
    border-radius: 10px;
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.2);
    transition: background 0.3s ease;
    font-size: 20px;
	box-shadow: 0 8px 10px rgba(0, 0, 0, 0.7);
}

.cta-button:hover {
  background: #a1005d;
}
#popup-overlay {
  display: none; /* hide initially */
}



@media (max-width: 767px) {
  .popup {
    max-height: 90vh;
    overflow-y: auto;
		    width: 100%;
  }

  .popup-header {
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 20px;
  }

  .logo-left {
    height: 30px;
  }

  .logo-right {
    height: 75px;
  }

  .popup-heading h2 {
    font-size: 20px;
    line-height: 1.2;
  }

  .popup-content-over-image {
    padding: 20px;
    height: 550px;
background-position: center;
  }

  .event-row {
    font-size: 14px;
    justify-content: flex-start;
  }

  .cta-button {
    font-size: 18px;
    padding: 10px 20px;
  }
}
</style>
<script>
document.addEventListener("DOMContentLoaded", function () {
    const popup = document.getElementById("popup-overlay");
    const closeBtn = document.querySelector(".close-btn");

    // Check if popup has already been shown (across tabs)
    const hasSeenPopup = localStorage.getItem("popupShown");

    if (!hasSeenPopup && popup) {
      // Show popup and mark it as seen immediately
      popup.style.display = "flex";
      localStorage.setItem("popupShown", "true");
    }

    if (popup && closeBtn) {
      closeBtn.addEventListener("click", () => {
        popup.style.display = "none";
      });
    }
  });
</script>

why this popup is not showing in mobile , I checked in my mobile phone , I c;eared the cokkie even but still not working , fix it !

Assistant
Thanks for sharing everything clearly!

### ✅ The issue:
Your popup is not showing on mobile **even after clearing cookies or storage**, and it works fine on desktop.

—

### 🔍 Likely reasons:

#### 1. ✅ `localStorage` is already set
Even though you cleared cookies, you also need to clear **localStorage**, which is separate from cookies.

✅ On mobile:
– Open DevTools (in mobile browser via USB or remote inspection)
– Go to `Application → localStorage` → remove `popupShown`

Or for now, **test with a different key** to confirm:

localStorage.setItem("popupShown_mobile", "true");

—

#### 2. ❗ CSS `display: none` might still be hiding it unintentionally
You have **two `#popup-overlay` CSS blocks**:

#popup-overlay {
  ...
}
#popup-overlay {
  display: none;
}

✅ Fix: Merge them correctly into one clean block:

#popup-overlay {
  display: none; /* hidden initially */
  position: fixed;
  top: 0;
  left: 0;
  height: 100vh;
  width: 100%;
  background: rgba(0, 0, 0, 0.6);
  z-index: 9999;
  justify-content: center;
  align-items: center;
  overflow-y: auto;
  padding: 20px;
}

> Having `display: none` in a separate duplicate block can cause it to be reapplied even after JS sets `display: flex`.

—

#### 3. ❗ JavaScript may run **before DOM is fully ready** on slower mobile devices

✅ Safer to use `window.onload` instead of `DOMContentLoaded`:

<script>
  window.addEventListener("load", function () {
    const popup = document.getElementById("popup-overlay");
    const closeBtn = document.querySelector(".close-btn");

    const hasSeenPopup = localStorage.getItem("popupShown");

    if (!hasSeenPopup && popup) {
      popup.style.display = "flex";
      localStorage.setItem("popupShown", "true");
    }

    if (popup && closeBtn) {
      closeBtn.addEventListener("click", () => {
        popup.style.display = "none";
      });
    }
  });
</script>

—

### ✅ Summary Fix Steps:
1. ✅ Use `window.onload` instead of `DOMContentLoaded`
2. ✅ Merge your duplicate CSS for `#popup-overlay`
3. ✅ Clear localStorage or change the key for testing
4. ✅ Test on **mobile browser with dev tools** or a private window

—

Let me know if you want to:
– Show popup again after X days
– Trigger it by scroll or delay
– Add a “Don’t show again” checkbox

I can help with that too.

User
still not shpwing , whats the issue ?
Assistant
Let's go step-by-step to identify and fix the issue:

### 1. **Check for `localStorage` properly**
The issue might be that the `localStorage` value is not being checked or set correctly. To be sure it's not an issue with the storage, let's add some debugging.

Modify the JS code to log the localStorage value:

<script>
  window.addEventListener("load", function () {
    const popup = document.getElementById("popup-overlay");
    const closeBtn = document.querySelector(".close-btn");

    // Debug: Log the localStorage key
    console.log("Has Seen Popup:", localStorage.getItem("popupShown"));

    const hasSeenPopup = localStorage.getItem("popupShown");

    if (!hasSeenPopup && popup) {
      popup.style.display = "flex";
      localStorage.setItem("popupShown", "true"); // Mark it as seen
      console.log("Popup shown");
    }

    if (popup && closeBtn) {
      closeBtn.addEventListener("click", () => {
        popup.style.display = "none";
      });
    }
  });
</script>

Check your browser's console for the log output:

– `"Has Seen Popup:"` should show `null` if it's the first visit (or if it's never set).
– `"Popup shown"` should log after the popup is displayed.

If you don't see these logs, then there might be a problem with the script loading or the `localStorage` mechanism.

—

### 2. **CSS Check**
Please make sure your popup CSS is not accidentally being overridden elsewhere in your code. Specifically, ensure there's no `display: none` being set elsewhere in your stylesheet.

Make sure you’re merging your styles correctly:

#popup-overlay {
  display: none; /* hidden initially */
  position: fixed;
  top: 0;
  left: 0;
  height: 100vh;
  width: 100%;
  background: rgba(0, 0, 0, 0.6);
  z-index: 9999;
  justify-content: center;
  align-items: center;
  overflow-y: auto;
  padding: 20px;
}

.popup {
  background: #fff;
  width: 485px;
  max-width: 90%;
  max-height: 95vh; /* Important: limits height on any screen */
  overflow-y: auto;
  box-shadow: 0 0 25px rgba(0, 0, 0, 0.3);
  position: relative;
  animation: fadeIn 0.4s ease;
  margin: auto;
  border-radius: 10px;
}

This will ensure that `#popup-overlay` is hidden by default and only shown when the JavaScript runs.

—

### 3. **Inspect on Mobile**
To check why it's not working on mobile, you can **inspect mobile browser behavior** in Chrome's developer tools:

1. Open Chrome DevTools (F12 or right-click → Inspect)
2. Switch to mobile view by clicking the device icon in the top-left corner (or `Ctrl+Shift+M`).
3. Reload the page and check the **Console** tab for any errors.
4. Check the **Application** tab → **Local Storage** and ensure the key `popupShown` is set properly.

You can also use **Private Browsing** mode or **Incognito** to make sure no previous localStorage or cookies interfere.

—

### 4. **Check for Mobile-Specific Issues**
Some mobile browsers have different behaviors when it comes to popups and modals. It may be worth testing if the popup is being blocked.

You can try forcing the visibility with a more aggressive approach temporarily to isolate the issue:

#popup-overlay {
  display: flex !important;
}

Also, add the `visibility: visible` and `opacity: 1` properties to make sure the popup isn’t getting visually hidden due to CSS.

—

### 5. **Check if JavaScript is Executing Properly on Mobile**
Add a console log at the start of the script to ensure it's executing on mobile:

<script>
  window.addEventListener("load", function () {
    console.log("Popup script running");  // Log message to confirm script execution
    
    const popup = document.getElementById("popup-overlay");
    const closeBtn = document.querySelector(".close-btn");
    
    // Debugging: Check localStorage for popupShown key
    console.log("Has Seen Popup:", localStorage.getItem("popupShown"));

    const hasSeenPopup = localStorage.getItem("popupShown");

    if (!hasSeenPopup && popup) {
      popup.style.display = "flex";
      localStorage.setItem("popupShown", "true");
      console.log("Popup shown");
    }

    if (popup && closeBtn) {
      closeBtn.addEventListener("click", () => {
        popup.style.display = "none";
      });
    }
  });
</script>

– **Check the console** on mobile for the `"Popup script running"` message to ensure the script is running on mobile devices.

—

### 6. **Test the Popup Display on Mobile Emulator**
You can also test the popup behavior using the mobile emulator in Chrome DevTools. Use the **Mobile Emulator** (click the device icon) and test again. This will show if there are issues specific to mobile view rendering.

—

Please test and let me know what you find, especially from the **console logs** on mobile.

Assistant
The most likely issue is that the **PHP IP condition isn’t being met on your mobile device**. Your popup is only rendered if the visitor's IP matches one of the allowed ones:

if ($user_ip === $allowed_ip || $user_ip === '14.141.174.122' )

If your mobile device isn’t using one of those IP addresses, then the popup’s HTML won’t render at all.

—

### What You Can Do

1. **Test the PHP Condition:**
– Temporarily remove or comment out the IP condition to verify if the popup appears on mobile:

<?php
     // $user_ip = $_SERVER['REMOTE_ADDR'];
     // $allowed_ip = '122.176.197.1';
     // if ($user_ip === $allowed_ip || $user_ip === '14.141.174.122' ):
     ?>
       <!-- Your popup HTML -->
     <?php 
     // endif;
     ?>

– If it appears on mobile after this change, then the issue is the IP check.

2. **Check Your Mobile Device’s IP:**
– You can temporarily add this in your PHP file to see what IP your mobile visitor is using:

<?php
     echo "Your IP is: " . $_SERVER['REMOTE_ADDR'];
     ?>

– Then compare it with your allowed IP addresses.

3. **Update the Allowed IPs If Necessary:**
– If you want to see the popup on all devices (or on mobile too), then either remove the IP restriction or add your mobile device’s IP address to the allowed list.

4. **Consider Alternative Conditions:**
– Instead of restricting by IP, you might use other conditions (like a specific query parameter or a cookie) if you need to display it on mobile as well.

—

### Final Note
Since your script, CSS, and JavaScript (when isolated) work fine on desktop, the key factor is that **the popup HTML only gets output for allowed IPs**. On your mobile device, the IP check likely fails, so the popup doesn’t show.

Let me know if you’d like help modifying the IP logic or exploring an alternative condition for showing the popup!

Assistant
Yes — with your current code, it's **now working on mobile** because you've fixed the actual cause, which was likely **the PHP IP check** not matching on your mobile device earlier.

You're now using `sessionStorage` instead of `localStorage`, which means:

| ✅ **Popup shows** | ✅ **Works across devices** | ❌ **Still shows again in a new tab** |
|——————-|—————————–|————————————–|
| Once per session | Yes | No (new tab = new sessionStorage) |

—

### ✅ Do You Need to Add or Remove Anything?

#### ✅ You're **mostly good**, but here are final best practices:

—

### ✅ 1. 🔄 Use `localStorage` instead of `sessionStorage`
**Why?** So popup doesn't appear again if the user:
– Opens in a new tab
– Clicks a menu link
– Navigates back to home

**Update:**

const hasSeenPopup = localStorage.getItem("popupShown");

if (!hasSeenPopup && popup) {
  popup.style.display = "flex";
  localStorage.setItem("popupShown", "true");
}

—

### ✅ 2. ❌ Remove duplicated CSS selector
You have this **twice**:

#popup-overlay {
  display: none; /* hide initially */
}

✅ Keep it only **once**, at the top of the `#popup-overlay` block:

#popup-overlay {
  display: none;
  position: fixed;
  ...
}

—

### ✅ 3. 💡 Optional: Add `noscript` fallback (for SEO or crawlers)

<noscript>
  <style>
    #popup-overlay { display: none !important; }
  </style>
</noscript>

—

### ✅ 4. 🧪 Final Checklist

| Feature | Status |
|——————————-|————–|
| Prevents flicker | ✅ Done |
| Hides after first visit | ✅ Done via localStorage |
| Works across all pages/tabs | ✅ Yes |
| Responsive mobile layout | ✅ Yes |
| Display only for certain IPs | ✅ Working |

—

### ✅ Final Verdict

Yes, it's now working fine. Just **switch to `localStorage`** (if not already), remove any CSS duplication, and you're good to go ✅.

Let me know if you want it to:
– **Expire after 1 day**
– Show again after a week
– Only appear on **homepage**

I can give you those variations too.

User
give me full code !
Assistant
Here is your **final full code** — cleaned, fixed, and working across **mobile + desktop**, showing the popup **only once** using `localStorage`, and restricted to **specific IPs**.

—

### ✅ **1. PHP + HTML + CSS + JS**
Paste this in your footer or wherever you're including popup code in WordPress:

<?php
$user_ip = $_SERVER['REMOTE_ADDR'];
$allowed_ip = '122.176.197.1';

if ($user_ip === $allowed_ip || $user_ip === '14.141.174.122'): ?>
  <div id="popup-overlay">
    <div class="popup">
      <button class="close-btn">×</button>

      <div class="popup-header">
        <img src="/wp-content/themes/houseoftiles/assets/img/logo.svg" alt="House of Tiles" class="logo-left" />
        <img src="/wp-content/uploads/2025/05/white_meadow-logo.png" alt="White Meadow Interiors" class="logo-right" />
      </div>

      <div class="popup-content">
        <div class="popup-heading">
          <h2>DESIGN YOUR<br><span>DREAM BATHROOM</span></h2>
          <p class="subtext">with Emma Butler of White Meadow Interiors</p>
        </div>

        <div class="popup-content-over-image">
          <div>
            <p class="info">
              Join us at our Sandyford Showroom for an exclusive in-store event featuring 1-on-1 design consultations with Emma Butler and a live Bathroom Design Q&A session.
            </p>

            <div class="event-details">
              <div class="event-row">
                <img src="/wp-content/uploads/2025/05/calender.png" alt="Calendar Icon" class="event-icon">
                <strong>Saturday 24<sup>th</sup> May, 9am - 5pm</strong>
              </div>
              <div class="event-row">
                <img src="/wp-content/uploads/2025/05/pin-location.png" alt="Location Icon" class="event-icon">
                <strong>House of Tiles Sandyford</strong>
              </div>
            </div>
          </div>

          <div>
            <a href="/white-meadow/" class="cta-button">Apply for your <br> 1-on-1 design consultation</a>
          </div>
        </div>
      </div>
    </div>
  </div>
<?php endif; ?>

<style>
#popup-overlay {
  display: none; /* hidden by default */
  position: fixed;
  top: 0;
  left: 0;
  height: 100vh;
  width: 100%;
  background: rgba(0, 0, 0, 0.6);
  z-index: 9999;
  justify-content: center;
  align-items: center;
  overflow-y: auto;
  padding: 20px;
}

.popup {
  background: #fff;
  width: 485px;
  max-width: 90%;
  max-height: 95vh;
  overflow-y: auto;
  box-shadow: 0 0 25px rgba(0, 0, 0, 0.3);
  position: relative;
  animation: fadeIn 0.4s ease;
  margin: auto;
  border-radius: 10px;
}

@keyframes fadeIn {
  from { opacity: 0; transform: scale(0.95); }
  to { opacity: 1; transform: scale(1); }
}

.popup-content-over-image {
  background: #fff url(/wp-content/uploads/2025/05/pop-up-bg.png) no-repeat;
  background-size: cover;
  height: 600px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 20px 40px 30px 40px;
  background-position: 20% 55%;
}

.popup-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 30px;
  background: #d8dedc;
}

.logo-left {
  height: 40px;
}
.logo-right {
  height: 90px;
}

.popup-content {
  text-align: center;
}

.popup-heading {
  background-color: #1b313e;
  padding: 10px;
}
.popup-heading h2 {
  color: #fff;
  margin-bottom: 0px;
}
.subtext {
  color: #c30072;
  font-weight: bold;
  margin: 10px 0;
}
.info {
  color: #858585;
}
.event-details {
  display: flex;
  flex-direction: column;
  gap: 5px;
  font-size: 15px;
  color: #333;
  margin-top: 12px;
  align-items: center;
}
.event-row {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 18px;
  justify-content: center;
}
.event-icon {
  width: 20px;
  height: 20px;
  object-fit: contain;
}
.cta-button {
  display: block;
  background: #c30072;
  color: white;
  padding: 12px 24px;
  text-decoration: none;
  font-weight: bold;
  border-radius: 10px;
  box-shadow: 0 8px 10px rgba(0, 0, 0, 0.7);
  transition: background 0.3s ease;
  font-size: 20px;
}
.cta-button:hover {
  background: #a1005d;
}

/* Responsive */
@media (max-width: 767px) {
  .popup {
    max-height: 90vh;
    overflow-y: auto;
    width: 100%;
  }

  .popup-header {
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 20px;
  }

  .logo-left {
    height: 30px;
  }
  .logo-right {
    height: 75px;
  }

  .popup-heading h2 {
    font-size: 20px;
    line-height: 1.2;
  }

  .popup-content-over-image {
    padding: 20px;
    height: 550px;
    background-position: center;
  }

  .event-row {
    font-size: 14px;
    justify-content: flex-start;
  }

  .cta-button {
    font-size: 18px;
    padding: 10px 20px;
  }
}
</style>

<script>
  window.addEventListener("load", function () {
    const popup = document.getElementById("popup-overlay");
    const closeBtn = document.querySelector(".close-btn");

    const hasSeenPopup = localStorage.getItem("popupShown");

    if (!hasSeenPopup && popup) {
      popup.style.display = "flex";
      localStorage.setItem("popupShown", "true"); // mark as shown immediately
    }

    if (popup && closeBtn) {
      closeBtn.addEventListener("click", () => {
        popup.style.display = "none";
      });
    }
  });
</script>

—

### 🔁 Optional Reset for Testing:
To test this again manually, run this in the browser console:

localStorage.removeItem("popupShown");

—

Let me know if you'd like to:
– Expire this after X days using cookies
– Animate the popup in/out
– Track button clicks in Google Analytics

I'm happy to help further!

Leave a Comment

Your email address will not be published. Required fields are marked *