Is there any way to make buttons behind a div clickable, without disabling the buttons IN the div?

Question

I have a webpage that uses an iFrame to load a dynamic header (long story short, we have a big site which includes a Shopify page; every other page on the site uses an Ektron widget to load the header, but I can't do that in the Shopify code, so instead I'm using an iFrame to load the header from a separate page). The header has buttons that need to work, as well as a modal window that opens when the login button is clicked. The modal window is the problem. My iFrame is currently the size of the header itself (330px); if the iFrame window is bigger than that, it covers the content lower on the page and makes those buttons unclickable. I can't add "pointer-events:none" to the iFrame, because I need the buttons in the iFrame header to work. However, when the login modal opens, it gets cutoff because the iFrame is not big enough to display the whole thing. I also can't set the iFrame height to say 1000px and use z-index to put it behind the other content, because when I do that, the content on the Shopify page displays on top of the modal window.

The last thing I tried was the dynamically change the height of the iFrame so that when the login button is clicked, the height of the iFrame increases to show the whole modal. However, because the iFrame content has a different domain from the Shopify page, I cannot target the iFrame as the parent of the header document.

What I really want to do is make the height of the iFrame big enough to display the modal window, but also make the buttons behind the iFrame clickable, without disabling the buttons in the iFrame. Is there any way at all that I can enable buttons both in AND behind a div?

Answer 1

This will be a very bad UX, and you should really be thinking of doing something else. But anyway, atleast in the newer browsers, you can put a pointer-events: none style on the iframe, which will not let it capture any click. Then you put a pointer-events: auto on the buttons inside the modal within the iframe so that atleast they register the click correctly. This way, you'll achieve the click-through.

Ofcourse, the pointer-events is supported for all modern browsers (but not IE10 and below)