Need my modal to overlay all elements on my page

Shopify Discussion

Topic summary

A developer encountered an issue where a custom modal wasn’t overlaying certain page elements—specifically the header, a footer element, and a chat icon—despite working correctly for other content.

Initial Implementation:

  • Modal and button were placed in a section element on the page
  • JavaScript was located in the static-header.liquid file
  • The modal failed to overlay all elements as intended

Resolution:

  • Moved modal content from a section to a Snippet
  • Rendered the Snippet in the theme.liquid file instead
  • Relocated JavaScript to theme.liquid file
  • Applied position: absolute; and z-index: 99999; to the modal container CSS

This restructuring successfully enabled the modal to overlay all page elements including the previously problematic header and footer. The issue is now resolved.

Summarized with AI on November 1. AI used: claude-sonnet-4-5-20250929.
1

Hi,

I’m working on implementing a custom modal on multiple pages on a site.

I have the modal working on a test page but it’s overlaying most elements on the page except the header, one footer element and the chat icon. I’d like this to overlay all elements on the page.

I have the modal and button content in a section element placed on a page.


  

  
  

    

      ×
      

This is a modal popup test

The JavaScript is in a section called static-header.liquid file

Here is the test page:

https://liftow-safety-products.myshopify.com/pages/ja-sandbox

Hoping this is an easy solve.

Thanks in advance!

2

Update:

I solved the issue by placing the modal content in a Snippet then rendered that Snippet in the theme.liquid file.

I also moved the JavaScript to theme.liquid file.

The modal now can be layered over the header and footer using position: ablsolute; and z-index: 99999; in the CSS for the modal container.