Modal windows - header cut off on website

I have some modal windows in my apps. When I embed this onto a web page for use, with a standard header, the top of the model sits behind the top header of the website.

How do I either

  1. bring the model to the front (preferred)

or 2. Reposition the model further down the page so the header doesn’t obscure the top of the modal.

thanks

Hi,

In Knack’s CSS panel, set the “z index” property for the modal. Choose a number larger than the header i.e. You can choose a large number like 9999 assuming you want the modal to always be in front.

.kn-modal {
  z-index: 9999;
}
2 Likes

thanks, but that doesn’t seem to make any difference. The modal is still not on top.

I have raised a ticket with Knack support.

thanks, but that doesn’t seem to make any difference. The modal is still not on top.

Your header most likely has a larger z-index than 9999. In that case, set the z-index for your modal even larger. For instance on the WordPress “Divi” theme, the header has a z-index of 99999. See screenshot below:

In that case, you would need to set your modal z-index higher than 99999 i.e. 100000.

Alternatively, you could also lower the z-index of your header. That would achieve the same goal.