@HlushkoArthur

Как по нажатию вне модалки закрыть её?

Есть модалка и нужно сделать так, чтобы когда я кликаю вне модалки, то она закрывалась. Как это реализовать?
  • Вопрос задан
  • 58 просмотров
Решения вопроса 1
Xuxicheta
@Xuxicheta Куратор тега Angular
инженер
@Directive({
  selector: '[clickOutside]'
})
export class ClickOutsideDirective {
  @Output('clickOutside') clickOutside = new EventEmitter();

  constructor(
    private elRef: ElementRef<HTMLElement>
  ) { }

  @HostListener('document:click', ['$event.target']) onMouseClick(targetElement) {
    const clickedInside = this.elRef.nativeElement.contains(targetElement);
    if (!clickedInside) {
      this.clickOutside.emit(targetElement);
    }
  }
}


<app-modalka  (clickOutside)="onClickOutside($event)"></app-modalka>


А вообще юи либы же поддерживают такое из коробки.
в материал или cdk/overlay это backdropClick.
А делать модалки не по cdk это не тру.
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
mmmaaak
@mmmaaak
делаешь прозрачную fixed подложку на весь экран, ну или не прозрачную, обычно ее немного затеняют, и отслеживаешь клик по этой подложке
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы