Backdrop filter on pop up background

[fanceiboutique]

I create this pop up, that appears when the people go to the main menu. I tried to make the background blurry but i cant. I tried with backdrop-filter but don’t work. Can you help me?

This is the code:

<section id="my-popup-section">
  <!-- Overlay difuminado -->
  <div class="my-popup-overlay"></div>

  <!-- Contenedor principal -->
  <div class="my-popup-container">
    <div class="my-popup-content">
      <!-- Botón de cierre en la esquina sup. derecha (forzado con !important) -->
      <button type="button" class="my-popup-close">{{ section.settings.close_text }}</button>

      <!-- Imagen del popup (con protección para evitar copia) -->
      {% if section.settings.popup_image != blank %}
        <img
          src="{{ section.settings.popup_image | img_url: 'master' }}"
          alt="{{ section.settings.popup_alt_text }}"
          class="my-popup-image"
          oncontextmenu="return false;"
          draggable="false"
        />
      {% endif %}
    </div>
  </div>
</section>

<!-- Solapa para reabrir el popup -->
<div class="my-popup-reopen-tab hidden">
  <span class="tab-text">{{ section.settings.tab_label }}</span>
  <button type="button" class="my-close-tab">x</button>
</div>

<style>
  /* =========================
     EVITAR RECORTES Y CONFIG BÁSICA
     ========================= */
  html, body {
    overflow-x: visible !important;
  }

  /* =========================
     POPUP SECTION
     ========================= */
  #my-popup-section {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: none;
    z-index: 999999;
  }
  #my-popup-section.active {
    display: block;
  }

  /* Overlay con difuminado:
     - Usamos position: fixed para cubrir toda la pantalla.
     - El background-color con rgba permite que se vea el blur.
     - Se añaden background-clip y will-change para mejorar la renderización */
  .my-popup-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
    background-clip: padding-box;
    will-change: backdrop-filter;
    z-index: 1;
  }

  .my-popup-container {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 2; /* Por encima del overlay */
  }

  /* Contenido con position relative para anclar la X */
  .my-popup-content {
    position: relative !important;
    max-width: {{ section.settings.image_max_width }}px;
    width: 100%;
    border-radius: 10px;
    overflow: hidden;
    background: #fff;  /* Opcional: fondo blanco para el contenido */
  }

  .my-popup-image {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 10px;
    /* Evitar arrastrar y seleccionar la imagen */
    -webkit-user-drag: none;
    user-drag: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
  }

  /* =========================
     BOTÓN “X” DEL POPUP
     ========================= */
  .my-popup-close {
    position: absolute !important;
    top: 10px !important;
    right: 10px !important;
    left: auto !important;
    background: transparent;
    border: none;
    font-size: {{ section.settings.close_button_size }}px !important;
    cursor: pointer;
    color: {{ section.settings.close_button_color }} !important;
    z-index: 3 !important;
    overflow: hidden;
    transition: color 0.3s ease;
  }
  .my-popup-close::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 40px;
    height: 40px;
    border: 2px solid currentColor;
    border-radius: 50%;
    transform: translate(-50%, -50%) scale(0);
    transition: transform 0.3s ease;
  }
  .my-popup-close:hover::before {
    transform: translate(-50%, -50%) scale(1);
  }
  .my-popup-close:hover {
    color: {{ section.settings.close_button_hover_color }} !important;
  }

  /* =========================
     SOLAPA PARA REABRIR
     ========================= */
  .my-popup-reopen-tab {
    position: fixed;
    left: 15px;
    top: 50%;
    z-index: 999999;
    min-width: 120px;
    padding: 10px 15px;
    transform-origin: left center;
    transform: translateY(-50%) rotate(90deg);
    background: {{ section.settings.tab_bg_color }};
    color: {{ section.settings.tab_text_color }};
    border-radius: 10px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .my-popup-reopen-tab .tab-text {
    margin-right: 8px;
    font-size: 14px;
    white-space: nowrap;
  }

  /* “X” de la solapa */
  .my-close-tab {
    background: transparent;
    border: none;
    font-size: 16px;
    cursor: pointer;
    color: {{ section.settings.close_button_color }} !important;
    overflow: hidden;
    transition: color 0.3s ease;
  }
  .my-close-tab::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 30px;
    height: 30px;
    border: 2px solid currentColor;
    border-radius: 50%;
    transform: translate(-50%, -50%) scale(0);
    transition: transform 0.3s ease;
  }
  .my-close-tab:hover::before {
    transform: translate(-50%, -50%) scale(1);
  }
  .my-close-tab:hover {
    color: {{ section.settings.close_button_hover_color }} !important;
  }

  /* =========================
     RESPONSIVE (MÓVIL)
     ========================= */
  @media (max-width: 767px) {
    .my-popup-content {
      margin: 0 15px;
    }
  }

  /* Ocultar elementos */
  .hidden {
    display: none !important;
  }
</style>

<script>
  document.addEventListener('DOMContentLoaded', function() {
    var popupSection = document.getElementById('my-popup-section');
    var reopenTab = document.querySelector('.my-popup-reopen-tab');
    var popupContainer = popupSection.querySelector('.my-popup-container');
    var popupContent = popupSection.querySelector('.my-popup-content');
    var closeButton = popupSection.querySelector('.my-popup-close');
    var closeTabButton = reopenTab.querySelector('.my-close-tab');

    // Función para abrir el popup
    function openPopup() {
      popupSection.classList.add('active');
      reopenTab.classList.add('hidden');
    }

    // Función para cerrar el popup
    function closePopup() {
      popupSection.classList.remove('active');
      reopenTab.classList.remove('hidden');
    }

    // Mostrar el popup al cargar la página
    popupSection.classList.add('active');

    // Cerrar con la "X" del popup
    if (closeButton) {
      closeButton.addEventListener('click', closePopup);
    }

    // Cerrar al hacer clic fuera del contenido
    popupContainer.addEventListener('click', function(e) {
      if (!popupContent.contains(e.target)) {
        closePopup();
      }
    });

    // Reabrir popup al hacer clic en la solapa (excepto en su "X")
    reopenTab.addEventListener('click', function(e) {
      if (e.target !== closeTabButton) {
        openPopup();
      }
    });

    // Cerrar definitivamente la solapa
    if (closeTabButton) {
      closeTabButton.addEventListener('click', function(e) {
        e.stopPropagation();
        reopenTab.remove();
      });
    }
  });
</script>

{% schema %}
{
  "name": "Popup Home",
  "settings": [
    {
      "type": "image_picker",
      "id": "popup_image",
      "label": "Imagen del popup",
      "info": "Máximo 1200px de ancho."
    },
    {
      "type": "text",
      "id": "popup_alt_text",
      "label": "Texto alternativo de la imagen",
      "default": "Imagen del Popup"
    },
    {
      "type": "range",
      "id": "image_max_width",
      "label": "Ancho máximo de la imagen (px)",
      "min": 100,
      "max": 1200,
      "step": 11,
      "default": 1200
    },
    {
      "type": "text",
      "id": "close_text",
      "label": "Texto del botón de cierre (popup)",
      "default": "X"
    },
    {
      "type": "range",
      "id": "close_button_size",
      "label": "Tamaño de la fuente de la X (px)",
      "min": 10,
      "max": 50,
      "step": 1,
      "default": 20
    },
    {
      "type": "color",
      "id": "close_button_color",
      "label": "Color de la X",
      "default": "#ffffff"
    },
    {
      "type": "color",
      "id": "close_button_hover_color",
      "label": "Color de la X (hover)",
      "default": "#ff0000"
    },
    {
      "type": "range",
      "id": "overlay_opacity",
      "label": "Opacidad del overlay (0-100)",
      "min": 0,
      "max": 100,
      "step": 1,
      "default": 50
    },
    {
      "type": "range",
      "id": "overlay_blur",
      "label": "Cantidad de difuminado del overlay (px)",
      "min": 0,
      "max": 20,
      "step": 1,
      "default": 5
    },
    {
      "type": "text",
      "id": "tab_label",
      "label": "Texto de la solapa para reabrir",
      "default": "Reabrir Popup"
    },
    {
      "type": "color",
      "id": "tab_bg_color",
      "label": "Color de fondo de la solapa",
      "default": "#333333"
    },
    {
      "type": "color",
      "id": "tab_text_color",
      "label": "Color de texto de la solapa",
      "default": "#ffffff"
    }
  ],
  "presets": [
    {
      "name": "Popup Home",
      "category": "Custom"
    }
  ]
}
{% endschema %}

This is my page:

www.fanceiboutique.com

[Huptech-Web]

Hello! @fanceiboutique ,Please follow these steps to add this CSS code:

1. Go to your Online Store
2. Click on “Themes”
3. Select “Edit code”
4. Open your CSS file. If you have a custom CSS file, open that instead.
5. If you can’t find your custom CSS file, open “theme.css”
6. Add the following code at the end of the file.

.my-popup-container {
    backdrop-filter: blur(5px); /* Increase the value if required more blur */
}

Here, is the screen of the same.

If you found this response helpful, please do like and accept the solution, and also if you have any questions please don’t hesitate to ask.
(S.P)

[rajweb]

Hey @fanceiboutique ,

Here’s the updated CSS to fix the blur issue:

.my-popup-container {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 2;
    backdrop-filter: blur(8px) !important;
}

Result:

This should properly blur the background when the popup appears.

If I was able to help you, please don’t forget to Like and mark it as the Solution!
If you’re looking for expert help with customization or coding, I’d be delighted to support you. Please don’t hesitate to reach out in my signature below—I’m here to help bring your vision to life!

Best Regard,
Rajat

[PageFly-Richard]

Hi @fanceiboutique

This is Richard from PageFly - Shopify Page Builder App

Please add this code to your theme.liquid above the to get this solved

Step 1: Online Stores > Themes > More Actions > Edit code

Step 2: click on theme.liquid and paste the code above the

Hope this can help you solve the issue

Best regards,

Richard | PageFly