Modal/ overlay “fancy 4” won’t show on top of other elements

[styleman]

I am a big fan of “Squeeze Form” and I was glad to find a good plugin for handling pdf download via email request.
While using it in a DIVI site, there is a big problem I encountered with the Modal / overlay function: it won’t show on top of other DIVI layers, and elements like header, menu and some divi blurb modules are even in front of the modal and its backdrop. (I tried a bit on z-index: 1000000…, but it did not work.)

Did anybody solve a resembling problem? How? I would be very glad for help! Thanks in advance…

[admin]

This is going to be a CSS related conflict with that particular theme so there may not be any solution. However, I am happy to inspect that HTML and CSS of the page to see if I can give you a tweak for it. Please post the URL of a page where I can go and see the issue using my browser.

[styleman]

Thanks a lot for your willingness to inspect! I am afraid, I can only offer a static copy as a dummysite. But it seems to me, it reproduces the unwanted modal-confusion-behaviour in a sufficient manner;-) [youbeauty.eu/dummypages/test_download_specs.html]

P.S. Our time-zones are a bit shifted, so please excuse my late replies – any help is still very appreciated.
Andreas

[admin]

I can’t see a way to make that popup go on top with the current setup you have there.

[slitweb]

Hello styleman!
I was facing the same issue and wrote an easy jQuery solution to this.

What my solution does:
it “detaches” the hidden popup window div from its current location in DOM and then appends it at the end of the DOM before footer element. This way it will be sitting above all other elements in your DOM.
In my case the wrapping div has an id called #main-content. You simply have to find out your main content wrapper before footer element and insert your id or class name instead in my script.
Then add this script to your website:

if($('div[id^=sf_popup_window_]').length) {
   $("div[id^=sf_popup_window_]").detach().appendTo("#main-content");
}

[admin]

Thank you for sharing your solution.

[Author]

Posts