Для реализации модальных окон карточек людей в JavaScript, можно использовать следующий подробный подход:
1. HTML разметка:
<div class="card"> <img src="person1.jpg" alt="Person 1"> <h2>John Doe</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> <button onclick="openModal(1)">Open Modal</button> </div> <!-- Дополнительные карточки людей --> <div class="card"> <!-- То же содержимое, но с другими данными --> <button onclick="openModal(2)">Open Modal</button> </div> <!-- Модальное окно --> <div id="modal" class="modal"> <div class="modal-content"> <span class="close-button" onclick="closeModal()">×</span> <!-- Здесь будет содержимое модального окна --> </div> </div>
2. CSS стили:
.card { display: inline-block; margin: 10px; padding: 10px; border: 1px solid #ccc; text-align: center; } .modal { display: none; position: fixed; z-index: 1; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; background-color: rgba(0, 0, 0, 0.5); } .modal-content { background-color: #fff; margin: 10% auto; padding: 20px; border: 1px solid #888; width: 80%; } .close-button { color: #888; float: right; font-size: 28px; font-weight: bold; } .close-button:hover, .close-button:focus { color: #000; text-decoration: none; cursor: pointer; }
3. JavaScript логика:
// Функция для открытия модального окна function openModal(personId) { var modal = document.getElementById("modal"); // Здесь можно добавить логику для получения данных о конкретном человеке на основе его идентификатора (personId) // Например, можно использовать AJAX-запрос для получения данных с сервера modal.style.display = "block"; } // Функция для закрытия модального окна function closeModal() { var modal = document.getElementById("modal"); modal.style.display = "none"; } // Запустить код, когда страница загружена window.onload = function() { // Получить все кнопки "Open Modal" var buttons = document.querySelectorAll("[onclick='openModal(1)']"); buttons.forEach(function(button) { // Добавить обработчик события для каждой кнопки button.onclick = function() { var personId = button.getAttribute("data-person-id"); openModal(personId); } }); }
Выше приведенный код предоставляет основу для создания модальных окон карточек людей на странице. Он предполагает, что у каждой кнопки "Open Modal" есть атрибут data-person-id
, который обеспечивает идентификатор человека. При нажатии на кнопку вызывается функция openModal
, которая открывает модальное окно с содержимым для соответствующего человека.
Заметьте, что данный код представляет лишь один из множества возможных подходов реализации модальных окон карточек людей в JavaScript. Вы можете настроить его и изменить так, чтобы соответствовать вашим конкретным требованиям и дизайну.