Модальные окна карточек людей. Как сделать?

Question

[eridanlivia]

Добрый день. Есть проблема. Есть карточки людей. Как сделать, чтобы при клике открывалось своё модальное окно ?

let userProf = '<div style="list-style-type: none">';
    for (let i = 0; i < DATA.length; i++) {
        userProf += "<div class='main'>" + "<div class=\"textcols-item show-modal\">" + "<div class=\"trigger\">" + "<h3>" + DATA[i].name + "</h3>" +
            "<br>" + "<br>" +
            "<i class=\"icono-iphone\"></i>" + "&nbsp" + "&nbsp" + "<span>" + DATA[i].phone + "</span>" +
            "<br>" + "<br>" +
            "<i class=\"icono-mail\"></i>" + "&nbsp" + "&nbsp" + "<span>" + DATA[i].email + "</span>" + "</div>" + "</div>" + "</div>" + "</div>" +

            "<div class=\"modal hidden\">" + "<button class=\"close-modal\">&times;</button>" + "<span>" + DATA[i].name + "</span>" + "</div>"

        ;
    }
    document.getElementById("result").innerHTML = userProf;

    document.getElementById('search').onkeyup = function() {
        document.getElementById('result').innerHTML = '';
        let searchText = this.value.toLowerCase();
        let stringLength = searchText.length;
        if (stringLength > 1) {
            for (let i = 0; i < DATA.length; i++) {
                let userName = DATA[i].name.split('').slice(0, stringLength).join('').toLowerCase();
                let userPhone = DATA[i].phone.split('').slice(0, stringLength).join('').toLowerCase();
                let userEmail = DATA[i].email.split('').slice(0, stringLength).join('').toLowerCase();
                if (userName == searchText || userEmail == searchText) {
                    document.getElementById('result').innerHTML += "<div class='main'>" + "<div class=\"trigger\">" + "<li class='list' style='list-style-type: none;'>" + "<h3>" + DATA[i].name + "</h3>" +
                        "<br>" + "<br>" +
                        "<i class=\"icono-iphone\"></i>" + "&nbsp" + "&nbsp" + "<span>" + DATA[i].phone + "</span>" +
                        "<br>" + "<br>" +
                        "<i class=\"icono-mail\"></i>" + "&nbsp" + "&nbsp" + "<span>" + DATA[i].email + "</span>" + "</li>" + "</div>" + "</div>" + "</div>" + "<br>" + "<br>";
                }
            }
        } else {
            document.getElementById("result").innerHTML = userProf;
        }
    };
    'use strict';

    const modal = document.querySelector('.modal');
    const overlay = document.querySelector('.overlay');
    const btnClose_modal = document.querySelector('.close-modal');
    const btnsOpenModal = document.querySelectorAll('.show-modal');

    const openModal = function () {
        modal.classList.remove('hidden');
        overlay.classList.remove('hidden');
    };

    const closeModal = function () {
        modal.classList.add('hidden');
        overlay.classList.add('hidden');
    };

    for (let i = 0; i < btnsOpenModal.length; i++) {
        btnsOpenModal[i].addEventListener('click', openModal);
    }

    btnClose_modal.addEventListener('click', closeModal);
    overlay.addEventListener('click', closeModal);

    //Handling an Esc_Keypress Event

    document.addEventListener('keydown', function (e) {
        if (e.key === 'Escape' && !modal.classList.contains('hidden')) {
            closeModal();
        }
    });

Answer 1

[DZHAMBUALT]

Для начала сверстай модальное окно.

Потом в CSS задай родительскому блоку модального окна display:none; или transform: scale(0); (Также можно поиграться с позиционированием)

Затем поставь обработчик событий на карточку, кнопку или ещё чего в этом роде который будет реагировать на клик. При помощи обработчика событий добавляй класс который будет переписывать display:none или transform: scale(0).

Comments

[eridanlivia]

Все пункты сделаны, кроме этого: "При помощи обработчика событий добавляй класс который будет переписывать display:none или transform: scale(0)."

А как это сделать? Какой вопрос задать в поисковике?