Y
Y
Yuri Gets2018-02-21 17:42:51
css
Yuri Gets, 2018-02-21 17:42:51

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;
}

The site code is long, so I won't copy it here.
Here is a link to the source:
view-source: https://yurii-hets.blogspot.com/
ps We are dealing with iOS.
pps popup is the green buttons in the price list.

Answer the question

In order to leave comments, you need to log in

3 answer(s)
I
IIIu6ko, 2018-02-21
@yora_gets

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.

Y
Yuri Gets, 2018-02-22
@yora_gets

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">

M
Mickey_Zzz, 2018-12-28
@Micky__Zzzz

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 question

Ask a Question

731 491 924 answers to any question