Модальные окна, которые раньше прикреплялись к нижнему краю экрана или панели iPhone, теперь нависают над новой прозрачной панелью, что выглядит, мягко говоря, не очень хорошо.
Как переместить модальное окно вниз под панелью навигации iPhone?
В моем случае модальные окна позиционируются с помощью CSS с положением: фиксированное; верх: 0; внизу: 0;.
Код: Выделить всё
body {
padding: 12px;
background-color: blue;
}
.btn {
color: blue;
text-decoration: none;
padding: 12px;
text-align: center;
border-radius: 8px;
background-color: white;
}
.modal {
display: none;
}
.modal:target {
display: flex;
flex-direction: column;
justify-content: flex-end;
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: rgba(0, 0, 0, 0.2);
}
.modal-content {
position: relative;
border-radius: 8px 8px 0 0;
background-color: white;
padding: 48px 12px 12px;
}
.modal-close-btn {
color: black;
font-size: 32px;
position: absolute;
top: 12px;
right: 12px;
width: 32px;
height: 32px;
text-decoration: none;
}Код: Выделить всё
[url=#myModal]
Open modal
[/url]
[url=#]
x
[/url]
Some content
Lorem ipsum dolor sit amet consectetur adipisicing elit. Ducimus veniam ipsam, sequi, odio totam culpa delectus quam facilis, pariatur accusantium optio est excepturi corrupti numquam tempora? Odit vero consectetur exercitationem.
Подробнее здесь: https://stackoverflow.com/questions/798 ... sty-design
