Currently, I am developing a website and encountering a specific issue with the modal structure. When viewing it on Codepen using Chrome devtools and toggling the device toolbar to simulate mobile screens, everything appears fine. However, when opening the page as a local HTML file with CSS and JS linked, the modal is not centered on the screen in this mode. The same problem persists with Firefox, but interestingly enough, disabling touch simulation in Firefox centers the modal properly.
function showModal() {
if (modalVisible) return;
modalVisible = true;
modal.style.display = "flex";
document.body.appendChild(modal);
}
I have made several attempts to troubleshoot and resolve the issue of centering the modal on the screen without causing content below to scroll away, but so far, haven't been successful in identifying the root cause.