Pop-up does not work on some cases

Online Store and Theme Development
1

Hi!
When clicked “Find my size” - all works fine on my developer’s store and the result should be as follows

image
image1920×915 61.8 KB

But is doesn’t work properly on reviewer’s store. There should be a pop-up (or side-bar) window. Seems like it opens, but other parts/sections/divisions overlap it.
image
image2926×494 10.5 KB

You can check how it incorrectly works on reviewer’s store here and console logs 023 – JT - JT - PH "CHECKOUT" and "CUSTOMERS"

I tried lots of things, but can’t replicate error or fix it. Seems like the issue is in animation, but not sure.
How can I replicate the problem from reviewer’s store? What is the problem and how can to fix it?
Feel free to ask any questions, thank you!

In .liquid file this part is responsible for openning modal window:

{% comment %} --- Modal --- {% endcomment %}
    <template x-if="isModalOpen">
      <div
        x-ref="modalOverlay"
        x-transition:enter="transition-opacity ease-out duration-300"
        x-transition:enter-start="opacity-0"
        x-transition:enter-end="opacity-100"
        x-transition:leave="transition-opacity ease-in duration-200"
        x-transition:leave-start="opacity-100"
        x-transition:leave-end="opacity-0"
        style="position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.6); display: flex; justify-content: flex-end; z-index: 9999;"
        @click.self="closeModal()"
      >
        <div
          x-show="isModalOpen"
          x-transition:enter="transition ease-out duration-300 transform"
          x-transition:enter-start="translate-x-full"
          x-transition:enter-end="translate-x-0"
          x-transition:leave="transition ease-in duration-200 transform"
          x-transition:leave-start="translate-x-0"
          x-transition:leave-end="translate-x-full"
          @click.stop
          class="apisizely-modal-panel" 
        >
          {% comment %} --- Modal Header (Title & Close Button) --- {% endcomment %}
          <div class="apisizely-modal-header">
            <h2 x-text="modalTitle"></h2>
            <button type="button" @click="closeModal()" class="apisizely-modal-close-btn">&times;</button>
          </div>

          {% comment %} --- Modal Body (Iframe Container) --- {% endcomment %}
          <div class="apisizely-modal-body">
            <iframe
             x-ref="measurerIframe"
             title="Apisizely Measurer"
             sandbox="allow-forms allow-scripts allow-same-origin allow-popups allow-modals allow-downloads"
            ></iframe>
          </div>
        </div>
      </div>
    </template>
2

@Rubik_Kubik ,

Try to move modalOverlay code outside of section. Feel free to ask if any question :slight_smile:

3

@Dev_Inflame
Thank you! I tested direct editing of html section on reviewer’s page (since I can’t test on reviewer’s page in any other way) and it worked! On screenshots you can see what parts and where I have moved and the expected result.
But how can I change this section problem my .liquid script? I don’t control section from my liquid. It seems to be some user-defined “wrapper” (animation or something like that). Bellow is the extended code.

Снимок экрана 2025-06-20 в 23.46.49
Снимок экрана 2025-06-20 в 23.46.491648×1428 259 KB

Снимок экрана 2025-06-20 в 23.48.29
Снимок экрана 2025-06-20 в 23.48.291920×999 114 KB

{% if chart_id_string != blank and chart_id_string.size > 0 and chart_id_string != '0'%}
...
...
...
  <div
    x-data="sizeRecommendation(
      '{{ linked_chart_id }}',
      '{{ shop.permanent_domain }}',
      '{{ final_measurer_url | escape }}',
      '{{ product.id }}',
      '{{ product.title | escape }}',
      '{{ current_customer_id }}',
      '{{ btn_font.family | escape }}',
      '{{ btn_font.style | default: 'normal' | escape }}',
      '{{ btn_font.weight | default: 'normal' | escape }}',
      '{{ recommendation_display_behavior }}'
    )"
    x-init="init()"
    class="apisizely-container"
    data-apisizely-initialized="true"
  >

    {% comment %} --- Main Display Area --- {% endcomment %}
    <div x-cloak>
      {% comment %} Loading State - Conditional Spinner {% endcomment %}
      <div x-show="isLoading" x-cloak style="min-height: {{ btn_font_size | times: 1.5 }}px; display: flex; align-items: center; justify-content: {{ alignment }};">
        {% if spinner_type == 'dots' %}
          <div class="apisizely-spinner-dots" role="status">
            <div class="bounce1"></div>
            <div class="bounce2"></div>
            <div class="bounce3"></div>
            <span class="visually-hidden">{{ accessibility_loading_text }}</span>
          </div>
        {% else %}
          <div class="apisizely-spinner-border" role="status">
            <span class="visually-hidden">{{ accessibility_loading_text }}</span>
          </div>
        {% endif %}
      </div>

      {% comment %} State 1: Initial Button (No calculation attempted or state reset) {% endcomment %}
      <div x-show="!isLoading && !recommendationCalculated" x-cloak>
        <button type="button" @click="handleFindSizeClick()">
          {% if icon_selection == 'apisizely-default' %}
            <img
              src="{{ 'icon.svg' | asset_url }}"
              alt=""
              width="auto"
              height="{{ btn_font_size | times: 1.1 | round }}"
              loading="lazy"
            >
          {% elsif icon_selection == 'ruler-1' %}
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M21.17 5.83l-4-4a2 2 0 0 0-2.83 0L3.37 12.8a2 2 0 0 0 0 2.83l4 4a2 2 0 0 0 2.83 0L21.17 8.66a2 2 0 0 0 0-2.83zM8 18l-4-4M12 14l-4-4M16 10l-4-4M20 6l-4-4"/></svg>
          {% elsif icon_selection == 'custom' and custom_icon_image != blank %}
            <img
              src="{{ custom_icon_image | image_url: height: 30 }}"
              alt=""
              width="auto"
              height="{{ btn_font_size | times: 1.1 | round }}"
              loading="lazy"
            >
          {% endif %}
          <span>{{ btn_text }}</span>
        </button>
      </div>

      {% comment %} State 2: Recommendation Display (Calculated Successfully) {% endcomment %}
      <div x-show="!isLoading && recommendationCalculated && !error && userMeasurementsFromApi && recommendedSize" x-cloak>
        <span>
          {{ rec_prefix }}<span x-text="recommendedSize" style="font-weight: bold; color: {{ rec_color }};"></span>
        </span>
        <button type="button" class="edit-button" @click="openCorrectionModal()" title="{{ correct_measurements_text }}">
          {% if edit_icon_type == 'custom' and custom_edit_icon_image != blank %}
            <img
              src="{{ custom_edit_icon_image | image_url: height: 20 }}"
              alt="{{ correct_measurements_text }}"
              width="auto"
              height="{{ btn_font_size | round }}"
              loading="lazy"
            >
          {% else %}
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M17 3a2.85 2.83 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5Z"/><path d="m15 5 4 4"/></svg>
          {% endif %}
        </button>
      </div>

    </div>

    {% comment %} --- Modal --- {% endcomment %}
    <template x-if="isModalOpen">
      <div
        x-ref="modalOverlay"
        x-transition:enter="transition-opacity ease-out duration-300"
        x-transition:enter-start="opacity-0"
        x-transition:enter-end="opacity-100"
        x-transition:leave="transition-opacity ease-in duration-200"
        x-transition:leave-start="opacity-100"
        x-transition:leave-end="opacity-0"
        style="position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.6); display: flex; justify-content: flex-end; z-index: 9999;"
        @click.self="closeModal()"
      >
        <div
          x-show="isModalOpen"
          x-transition:enter="transition ease-out duration-300 transform"
          x-transition:enter-start="translate-x-full"
          x-transition:enter-end="translate-x-0"
          x-transition:leave="transition ease-in duration-200 transform"
          x-transition:leave-start="translate-x-0"
          x-transition:leave-end="translate-x-full"
          @click.stop
          class="apisizely-modal-panel" 
        >
          {% comment %} --- Modal Header (Title & Close Button) --- {% endcomment %}
          <div class="apisizely-modal-header">
            <h2 x-text="modalTitle"></h2>
            <button type="button" @click="closeModal()" class="apisizely-modal-close-btn">&times;</button>
          </div>

          {% comment %} --- Modal Body (Iframe Container) --- {% endcomment %}
          <div class="apisizely-modal-body">
            <iframe
             x-ref="measurerIframe"
             title="Apisizely Measurer"
             sandbox="allow-forms allow-scripts allow-same-origin allow-popups allow-modals allow-downloads"
            ></iframe>
          </div>
        </div>
      </div>
    </template>
    {% comment %} Helper class for screen reader only text {% endcomment %}
    <style>.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border-width: 0; }</style>
  </div>
{% endif %}```
4

@Rubik_Kubik ,
Try with this solution.

Replace this portion of code :

<template x-if="isModalOpen">
  <div
    x-ref="modalOverlay"
    ...
  >
    ...
  </div>
</template>

With this :

<template x-if="isModalOpen">
  <div x-teleport="body">
    <div
      x-ref="modalOverlay"
      x-transition:enter="transition-opacity ease-out duration-300"
      x-transition:enter-start="opacity-0"
      x-transition:enter-end="opacity-100"
      x-transition:leave="transition-opacity ease-in duration-200"
      x-transition:leave-start="opacity-100"
      x-transition:leave-end="opacity-0"
      style="position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.6); display: flex; justify-content: flex-end; z-index: 9999;"
      @click.self="closeModal()"
    >
      <div
        x-show="isModalOpen"
        x-transition:enter="transition ease-out duration-300 transform"
        x-transition:enter-start="translate-x-full"
        x-transition:enter-end="translate-x-0"
        x-transition:leave="transition ease-in duration-200 transform"
        x-transition:leave-start="translate-x-0"
        x-transition:leave-end="translate-x-full"
        @click.stop
        class="apisizely-modal-panel" 
      >
        {% comment %} --- Modal Header (Title & Close Button) --- {% endcomment %}
        <div class="apisizely-modal-header">
          <h2 x-text="modalTitle"></h2>
          <button type="button" @click="closeModal()" class="apisizely-modal-close-btn">&times;</button>
        </div>

        {% comment %} --- Modal Body (Iframe Container) --- {% endcomment %}
        <div class="apisizely-modal-body">
          <iframe
            x-ref="measurerIframe"
            title="Apisizely Measurer"
            sandbox="allow-forms allow-scripts allow-same-origin allow-popups allow-modals allow-downloads"
          ></iframe>
        </div>
      </div>
    </div>
  </div>
</template>
5

@Rubik_Kubik - did the technique above help?