Html Question posted in
Some basic documentation can be found here.

Html – 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.

Tags:

2

Answers


  1. 0

    When I open your code a local html, I see modal in center. screenshot 1

    Maybe you forgot disable cache in browser? And you see previos versions of your code?

    How to disable cache in Chrome screenshot 2

    Login or Signup to reply.
  2. 0

    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

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search