Как расположить модальное поле в макете CSS? - PullRequest
Новая
       5

Как расположить модальное поле в макете CSS?

0 голосов
/ 26 октября 2018

Целевая страница моего проекта имеет модальное значение, которое появляется при нажатии кнопки.Первоначально он был позиционирован с использованием position: fixed и поля установлены в ноль;таким образом, он появился в основном в центре экрана.

Теперь я хочу расположить его с использованием сетки CSS, поскольку целевая страница представляет собой сетку.Вот макет: 

.grid {
display: grid;
width: 100vw;
height: 100vh;
grid-template-rows: repeat(20, 5%);
grid-template-columns: repeat(20, 5%);
}

В отдельном файле CSS у меня есть CSS для модального окна.

.modalWindow {
display: grid;
grid-column: 8 / 15;
grid-row: 6 / 19;
position: fixed;
background: rgba(0,0,0,0.2);
z-index: 99999;
opacity:0;
-webkit-transition: opacity 400ms ease-in;
-moz-transition: opacity 400ms ease-in;
transition: opacity 400ms ease-in;
pointer-events: none;
}

Но теперь, вместо того, чтобы показывать, где я поместил его в сетку (по центру на экране), он кажется заподлицо слева и примерно на один дюйм ниже верхней части окна браузера.

Как изменить этот CSS, чтобы правильно расположить модал в сетке?

Спасибо.

...