Header/Footer Z-Index Issue with Modal

I’m playing around with building a modal and for some reason I can’t figure out why I can’t get the header and footer to fall below the modal background.

I have the modal z-index set to 9999 and the bars of the footer set to 1, yet the footer still appears on top of the modal.

The only way I can get the footer to behave properly is by setting footer:0. Even footer:1 does not work. I’m sure i’m missing something simple but can’t seem to figure it out.

Hello Mark,

Thanks for writing to us.

It might be the issue of z-index or custom CSS/JS customization issue. In order to help you with your concern, we need to check your settings. I would request you, please share your details in a secure note. Please provide the following details meanwhile you must troubleshoot common issue before we investigate your settings.

  • WordPress Login URL
  • Admin level username and password
  • Exact Page URL

You can find the Secure Note button at the bottom of your posts

Thanks

Forgot to put the link in the secure note…

https://everythingelsalvador.com/modal-test/

Hello Mark,

You are using this custom HTML coding in your modal:

<button id="openmodal">Open Modal</button>
<div id="modaltest">
<div id="modaltest_content">
<h2>Hello World</h2>
<p>Words and things.</p>
<button id="closemodal">Close </button>
</div>
</div>

Be advised that custom coding is beyond the scope of our support. If you need a modal for your site, please utilize the Modal element instead.

Best Regards.

Ah, thank you very much, I didn’t realize there was a modal element. This will save me a lot of time.

I don’t suppose you can correct me on the original issue, could you? I understand that custom code is outside the scope but would like to understand what went wrong.

Either way, thanks again for the help!

Hi Mark,

Glad that we are able to help you. Please remember that investigating the custom code issue(s) is beyond the scope of our Theme Support.

Thanks

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.