Понять причину проблемы root -
Вы добавили div с классом .modal
, который абсолютно позиционирован, и получили полный экран. Вдобавок ко всему, ваше настоящее модальное тело существует. Но так как .modal
div занимает все пространство экрана, он предотвращает щелчок по всем элементам ниже модального. Вот почему, когда вы пытаетесь щелкнуть кнопку click me
за пределами модального режима, фактически нажимается модал, а не кнопка.
Видите, когда вы наводите курсор на модальном элементе div на панели элементов, вы сможете чтобы увидеть полный синий экран.
Решение -
Это можно исправить с помощью CSS только. Замените ваш dialog-box.component.scss
этим кодом и попробуйте!
.dialog-modal {
padding: 1%;
.modal {
pointer-events: none;
display: block;
position: absolute;
z-index: 1;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
}
.modal-body {
pointer-events: all;
background-color: grey;
position: relative;
padding: 10px;
border: 1px solid;
width: 50%;
height: 50%;
min-width: 50%;
top: 100px;
left: 50px;
}
}
Подробнее о событиях указателя читайте здесь.