Answer the question
In order to leave comments, you need to log in
How to solve two problems: (1) Popup background scrolling and (2) website crawling off the screen?
1) When I open on a mobile phone (vertically or horizontally) - Popup on my site , then the background under it (that is, the site itself = body = #Block) scrolls along with the modal window (popup).
You need to fix the background while the modal window is open.
They suggested this solution (most likely the right one), but I don’t understand how to apply it.
2) The second situation is also from a mobile phone, but in vertical mode the page goes a little to the right, behind the screen. It is necessary that it does not go over the edge))
Here is the Popup code:
.b-popup {
width: 100%;
min-height: 100%;
background-color: rgba(0,0,0,0.5);
overflow: hidden;
position: fixed;
top: 0px;
left: 0px;
}
.b-popup .b-popup-content {
margin: 3%;
width: 80%;
height: auto;
padding: 35px 42px 33px 45px;
text-align: left;
background-color: #eeeeee;
box-shadow: 10px 10px 70px 10px #4b4b4b;
position: relative;
overflow: auto;
}
Answer the question
In order to leave comments, you need to log in
To prevent the background from scrolling under the popup, you need to set the body to overflow: hidden
Make a separate class for this and assign it to the body when opening the popup.
The second question is solved!
It was all about - meta viewport.
It was necessary to remove the “initial-scale” altogether:
< meta name="viewport" content="width=device-width", initial-scale="1" >
Now:
<meta name="viewport" content="width=device-width">
Also, when using this method, it happens that the screen twitches. To remove the effect, you need to bring all pages to the same width, for this we write a property in the CSS file that will add a scrollbar on all pages of the resource (even for which it is not required).
html {
overflow-y: scroll;
}
Didn't find what you were looking for?
Ask your questionAsk a Question
731 491 924 answers to any question