Search code examples
javascripthtmlcssmodal-dialog

Issues with centering a modal overlay on mobile screens


I am working on a website with the structure as shown in this codepen. Modal-test . In codepen, there doesn't seem to be any issue when i open the Chrome devtools and toggle device toolbar to see how the website will function on mobile screens but if i open it as a local html page (with CSS and JS linked), the modal is not centered on the screen in that mode. Same issue with Firefox (however I noticed that as long I turn the touch simulation off in firefox, the modal is centered, turning it on un-centers it.)

function showModal() {
    if (modalVisible) return;

    modalVisible = true;
    modal.style.display = "flex";
    document.body.appendChild(modal);
  }

I have tried to figure out how to center the modal on the screen while also not scrolling away from the content underneath it but I just can't find the problem.


Solution

  • Problem in <meta name="viewport" content="width=device-width, initial-scale=1.0">

    I recommend use this code - <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, minimal-ui" />

    More information about viewport