Закрыть Angular Modal, когда я нажимаю кнопку X

Я изучаю Угловой и сделал модальное в своем проекте. Если я нажму на класс с функцией openDialog(), он откроет модальное окно.

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

  <a class = "portfolio__item" target = "_blank" (click) = "openDialog()">
        <img src = "assets/img/mywork-img/portfolio-05.jpg" alt = "" class = "portfolio__img">
    </a>

<dialog id = "my-dialog-pubcrawl" class = "my-dialog">
   
   <div class = "np-row">
    <div class = "np-title">This is a dialog window</div>

    <div class = "np-close-btn" title = "Close">X</div> 
</div>
    
</dialog>

.ts-файл: Открывает модальное

  openDialog() {
    let myDialogPubcrawl:any = <any>document.getElementById("my-dialog-pubcrawl");
    myDialogPubcrawl.showModal();
}

Модальный:

Закрыть Angular Modal, когда я нажимаю кнопку X

Как я могу закрыть модальное окно, нажав X в Angular?

Чтобы действительно помочь вам исправить этот код. Нам нужно понять, что такое myDialogPubcrawl или как работает этот .showModal(). Но я могу сказать, что «щелкнуть снаружи» модальное окно и закрыть его. Самый простой способ — создать фоновый div. Позиционируется за модальным окном, с помощью щелчка мыши по кнопке «Отклонить()». То же самое уволить (), чтобы положить на кнопку X.

— 17.03.2022 14:19

myDialogPubcrawl — это переменная TS для HTML-идентификатора my-dialog-pubcrawl. ShowModal(9) отображает диалог в модальном режиме. Подробнее здесь: developer.mozilla.org/en-US/docs/Web/API/HTMLDialogElement/…

— 17.03.2022 14:24

javascript angular typescript

17.03.2022 14:14

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Один из способов добиться этого — сохранить экземпляр диалога и вызвать метод close:

<a class = "portfolio__item" target = "_blank" (click) = "openDialog()">
        <img src = "assets/img/mywork-img/portfolio-05.jpg" alt = "" class = "portfolio__img">
    </a>

<dialog id = "my-dialog-pubcrawl" class = "my-dialog">
   
   <div class = "np-row">
    <div class = "np-title">This is a dialog window</div>

    <div class = "np-close-btn" title = "Close" (click) = "closeDialog()">X</div> 
</div>
    
</dialog>

myDialogPubcrawl:any;

openDialog() {
    this.myDialogPubcrawl = <any>document.getElementById("my-dialog-pubcrawl");
    this.myDialogPubcrawl.showModal();
}

closeDialog() {
    this.myDialogPubcrawl.close();
}

17.03.2022 14:24

Другие вопросы по теме

Angular Как реализовать защиту CanActivate с вызовом HTTP Get

Как использовать сервис вместо другого сервиса Angular

Как проверить, что серия вызовов функций в службе создает ожидаемую серию выдаваемых значений из Observable в той же службе

Ограничение прослушивателя моментальных снимков Firestore на клиента. Охватывает ли один клиент все экземпляры приложения, работающего в браузере?

Почему Angular дублирует значения перечисления?

Справочное значение подписки Angular RxJS

Почему мой метод reduce() работает, если я определяю массив в TypeScript, но не при использовании файла модели?

Страница не обновляется с обновленной ссылкой в адресной строке с идентификатором в angular

Автоинициализация BehaviorSubject для кэширования глобальных данных

Макет начальной загрузки d-flex на мобильном телефоне не работает

Закрыть Angular Modal, когда я нажимаю кнопку X

Ответы 1

Другие вопросы по теме

Похожие вопросы