Включите такие действия, как щелчок, выбор et c ... за пределами модального окна в Angular - PullRequest
1 голос
/ 15 апреля 2020

Я создал пользовательское диалоговое окно в Angular. Текущее поведение диалогового окна заключается в том, что пользователь может нажимать только те кнопки, которые находятся внутри диалогового окна.

dialog-box.component. html

<div class="modal">
<div class="modal-body">
    <ng-template #content></ng-template>
</div>

dialog-box.component. css

.modal {
    display: block;
    position: absolute;
    z-index: 1;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
  }

  .modal-body{
    position: relative;
    padding: 10px;
    border: 1px solid;
    width: 50%;
    min-width: 50%;
    top: 100px;
    left: 0px;
  }

Я хочу добиться поведения, при котором хочу включить клик за пределами диалогового окна:

  1. кнопка, которая находится внутри диалогового окна ( кнопка закрытия ) и кнопка , которая находится за пределами диалогового окна ( Click Me button) для быть активным для клика Я хочу универсальное решение c, которое должно работать для каждого клика (кнопки, ссылки, тексты и т. Д. c ..) снаружи и внутри диалогового окна. Пожалуйста, помогите мне в этом.

    Демонстрация Stackblitz: https://stackblitz.com/edit/dialog-box-overlay

1 Ответ

1 голос
/ 15 апреля 2020

Понять причину проблемы root -

Вы добавили div с классом .modal, который абсолютно позиционирован, и получили полный экран. Вдобавок ко всему, ваше настоящее модальное тело существует. Но так как .modal div занимает все пространство экрана, он предотвращает щелчок по всем элементам ниже модального. Вот почему, когда вы пытаетесь щелкнуть кнопку click me за пределами модального режима, фактически нажимается модал, а не кнопка.

Видите, когда вы наводите курсор на модальном элементе div на панели элементов, вы сможете чтобы увидеть полный синий экран.

enter image description here

Решение -

Это можно исправить с помощью 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;
  }

}

Подробнее о событиях указателя читайте здесь.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...