Как в цикле открывать определенное модальное окно?

Question

Сократ

angular.js

Как в цикле открывать определенное модальное окно?

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

16 января 2024 г. 17:18

Ответы на вопрос 2

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

Answer 1

В вашем вопросе не указан конкретный код, поэтому предоставлю общий пример того, как это можно сделать с использованием HTML, CSS и JavaScript. Допустим, у нас есть список продуктов, и каждый продукт имеет свою кнопку для открытия модального окна:

```html
<!-- Начало списка продуктов -->
<div class="product" data-product-id="1">
  <h2>Product 1</h2>
  <button class="open-modal-btn" data-modal-target="#modal1">Open Modal 1</button>
</div>

<div class="product" data-product-id="2">
  <h2>Product 2</h2>
  <button class="open-modal-btn" data-modal-target="#modal2">Open Modal 2</button>
</div>

<!-- Здесь могут быть другие продукты -->

<!-- Соответствующие модальные окна -->
<div id="modal1" class="modal">
  <!-- Содержимое модального окна для Product 1 -->
  <button class="close-modal-btn">Close</button>
</div>

<div id="modal2" class="modal">
  <!-- Содержимое модального окна для Product 2 -->
  <button class="close-modal-btn">Close</button>
</div>

<!-- Здесь могут быть другие модальные окна -->
```

CSS:
```css
.modal {
  display: none;
  /* дополнительные стили для оформления модальных окон */
}

.modal.active {
  display: block;
  /* стили для отображения модального окна */
}
```

JavaScript:
```javascript
// Получаем все кнопки, открывающие модальные окна
const openModalButtons = document.querySelectorAll('.open-modal-btn');

// Получаем все кнопки, закрывающие модальные окна
const closeModalButtons = document.querySelectorAll('.close-modal-btn');

// Открываем соответствующее модальное окно при клике на кнопку
openModalButtons.forEach(button => {
  button.addEventListener('click', () => {
    const modal = document.querySelector(button.dataset.modalTarget);
    openModal(modal);
  });
});

// Закрываем модальное окно при клике на кнопку закрытия
closeModalButtons.forEach(button => {
  button.addEventListener('click', () => {
    const modal = button.closest('.modal');
    closeModal(modal);
  });
});

// Функции для управления модальными окнами
function openModal(modal) {
  if (modal == null) return;
  modal.classList.add('active');
}

function closeModal(modal) {
  if (modal == null) return;
  modal.classList.remove('active');
}
```

В приведенном примере при клике на кнопку с классом `open-modal-btn` будет открываться модальное окно, указанное в атрибуте данных `data-modal-target`. По этому атрибуту JavaScript определяет, какое модальное окно необходимо открыть. Аналогичным образом осуществляется закрытие модального окна при клике на кнопку с классом `close-modal-btn`.

Answer 2

Зачем тебе цикл в компоненте модалки? 
 
 Вынеси модалку в отдельный компонент, а products вынеси либо в ngrx, либо в @Input директиву и прокидывай свыше. - с остальными данными которые нужны для компонента аналогично поступай. 
 
 Добавь цикл там, где нужно вызвать несколько модалок.