I've implemented a custom bootstrap modal that works well on Desktops and Mobile devices.
However, I encountered an issue when trying to open it on an iPad. The modal opens but is completely obscured by a black overlay with opacity. The content of the modal is visible behind this overlay, but it's unclickable.
I attempted to resolve this by increasing the z-index for the modal class, but unfortunately, this did not have any effect.
Another strategy I tried was hiding the .modal-backdrop class. While this removed the black background, the modal still remained hidden behind my main header and left menu.
Any advice on how to address this issue would be greatly appreciated.