Мобильная версияЯ написал простую реализацию на React, включающую массив проектов. Каждый проект имеет свои собственные свойства. Я написал модальное окно, которое каждый раз, когда кто-то нажимает на изображение, должно отображаться на экране. сейчас модальное окно не отображается на экране. Я пытаюсь понять, почему и в чем проблема, но, к сожалению, не могу. вот реализация и CSS:
функция Projects() {const [selectedProject, setSelectedProject] = useState (null); константные проекты = [ { id: 1, title: "ShoeWarma", изображение: Showarma, описание: "Описание проекта 1" }, { id: 2, title: «Simon Game», изображение: SimonGame, описание: «Описание проекта 2» }, ]; const handleImageClick = (projectId) => { setSelectedProject (projectId); }; const closeModal = () => { setSelectedProject (нуль); }; возвращаться ( {projects.map(проект => ( {project.title}
handleImageClick(project.id)} /> ))} {выбранныйПроект && ( {проекты[selectedProject - 1].title
{projects[selectedProject - 1].description
)} ); } экспортировать проекты по умолчанию;
Это CSS:
.project-card img { максимальная ширина: 55%; максимальная высота: 55%; ширина: авто; высота: авто; граница: 2 пикселя, сплошная #fff; радиус границы: 15 пикселей; переход: все 0,5 секунды легкости; } .project-card img:hover { преобразование: масштаб (1.1); граница: 2 пикселя, сплошная #fff; радиус границы: 15 пикселей; } .project-grid { дисплей: гибкий; flex-wrap: обертка; оправдание-содержание: центр; } .проект-карта { гибкий: 0 0 расчет (33,33% - 20 пикселей); поле: 10 пикселей; выравнивание текста: по центру; } .модальный { дисплей: нет; положение: фиксированное; z-индекс: 1; слева: 0; верх: 0; ширина: 100%; высота: 100%; переполнение: авто; цвет фона: RGB (0, 0, 0); цвет фона: rgba(0, 0, 0, 0,4); отступ-верх: 60 пикселей; } .modal-content { цвет фона: #fefefe; маржа: 5% авто; отступ: 20 пикселей; граница: 1 пиксель, сплошная #888; ширина: 80%; } .закрывать { цвет: #ааа; плавать: вправо; размер шрифта: 28 пикселей; начертание шрифта: жирный; } .закрыть:наведите курсор, .близко:фокус { черный цвет; текстовое оформление: нет; курсор: указатель; } Я уже записываю в консоль handleimgclick, и это работает, каждый раз, когда я нажимаю на img, он выводит на консоль идентификатор конкретного проекта. я пытаюсь консольно логировать и массив проекта, и с ним все в порядке