Перейти к содержимому
Главная
Прикладная информатика
Учебные задания
Web-программирование
HTML
JS
PHP
Новости
Меню навигации
Меню навигации
Главная
Прикладная информатика
Учебные задания
Web-программирование
HTML
JS
PHP
Новости
<html lang="ru"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="styles.css"> </head> <body> <div class="image-container"> <img src="https://upload.wikimedia.org/wikipedia/commons/e/ed/ARA-Hyacinthe.jpg" onclick="showPopup('Гиацинтовый Ара', 'Гиацинтовый Ара — это яркая попугайная птица, известная своим красивым оперением и умом. Эти птицы обитают в тропических лесах Южной Америки, особенно в Бразилии. Гиацинтовый Ара может достигать длины до 100 см и является одной из самых крупных попугаев в мире.')"> </div> <div class="image-container"> <img src="https://avatars.mds.yandex.net/get-verba/1030388/2a0000017c513f35753dc475026b587dfb41/cattouchret" onclick="showPopup('Koenigsegg Jesko', 'Koenigsegg Jesko — это высокопроизводительный гиперкар, представленный шведским производителем Koenigsegg. Он обладает мощностью до 1600 л.с. и может развивать скорость до 480 км/ч. Jesko называется в честь отца основателя компании, Кристиана фон Кенигсегга, и предназначен для гонок на треке.')"> </div> <div class="popup" id="popup"> <div class="popup-content"> <span class="close" onclick="closePopup()">×</span> <h2 id="popup-title"></h2> <p id="popup-description"></p> </div> </div> <script src="script.js"></script> </body> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <script src="script.js"></script> </html>
function showPopup(title, description) { document.getElementById('popup-title').innerText = title; document.getElementById('popup-description').innerText = description; document.getElementById('popup').style.display = 'flex'; } function closePopup() { document.getElementById('popup').style.display = 'none'; }
body { font-family: Arial, sans-serif; display: flex; align-items: center; justify-content: center; height: 100vh; margin: 0; } .image-container { position: relative; margin: 20px; } img { width: 300px; height: 200px; object-fit: cover; cursor: pointer; border: 2px solid #333; border-radius: 8px; } .popup { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.8); justify-content: center; align-items: center; z-index: 1000; } .popup-content { background: #fff; padding: 20px; border-radius: 10px; text-align: center; } .close { cursor: pointer; color: red; font-weight: bold; }
Results:
×
