App Block Theme Extension Modal Popup Contained in Product Info Wrapper

Shopify Apps
5

We did resolve it. Aside from three global variables in our .js file, the first thing in the code is an event listener for document load and then append the container to the body. This is the code snippet and once we put the modal div in place the problem corrected itself.

The other piece is setting the z-index extremely high

.modal-container{
display: none;
position: fixed;
z-index: 999999;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgba(0,0,0,0.4)
}

and these solved the problem.

// Attach all startup event listeners and initialize logic when DOM is fully loaded
document.addEventListener('DOMContentLoaded', async () => {
    // Initialize modal container and listeners
    const modalContainer = document.getElementById('iwt-modal-container');
    const closeModalButton = document.getElementById('iwt-modal-close-btn');

    if (modalContainer) {
        modalContainer.style.display = 'none';
        document.body.appendChild(modalContainer);

        if (closeModalButton) {
            closeModalButton.addEventListener('click', (event) => {
                event.stopPropagation();
                closeModal();
                console.log('Modal closed with button click.');
            });
        }

        modalContainer.addEventListener('click', (event) => {
            if (event.target === modalContainer) {
                closeModal();
                console.log('Modal closed by clicking outside the modal content.');
            }
        });
    } else {
        console.error('Modal container not found. Check the ID "iwt-modal-container".');
    }