Почему мой модальный диалог не покрывает страницу в моем угловом компоненте? ⇐ CSS

[Anonymous]

У меня есть угловое веб -приложение, которое имеет страницу, которую необходимо прервать модальным диалогом в некоторых ситуациях. Однако, когда я нажимаю кнопку, которая делает это, модал появляется в нижней части страницы, не покрывая ее так, как я хочу. У нас есть несколько разных ароматов, и некоторые из этих ароматов должны предоставить нашим пользователям больше информации с помощью модального диалога, когда они подписываются. < /P>

Did you do the thing before signing out?



Yes



N/A




No


Open Modal

Overlay Modal

This modal should cover the page content.

OK





< /code>
Вот мой файл .scss для этого компонента. < /p>
@import '../../../../../../variables.scss';

.question-header {
font-weight: 300;
font-size: $h2-font-size;
padding: 0.5em;
margin: 0;
}
.question-part-two {
font-weight: 300;
font-size: $h4-font-size;
padding: 0.5em;
margin: 0;
}
::ng-deep .modal-dialog {
max-width: 500px;
margin: 1.75rem auto;
}

::ng-deep .modal-content {
border-radius: 10px;
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
padding: 1rem;
}

::ng-deep .modal-header {
border-bottom: none;
display: flex;
justify-content: space-between;
align-items: center;
}

::ng-deep .modal-footer {
border-top: none;
display: flex;
justify-content: flex-end;
}


Подробнее здесь: https://stackoverflow.com/questions/797 ... -component