Як створити вспливаюче вікно на JavaScript?
JavaScript володіє потужними можливостями для створення інтерактивності на веб-сайтах, включаючи вспливаючі вікна. У цьому навчальному посібнику ми розглянемо, як здійснити створення простого вспливаючого вікна за допомогою чистого JavaScript.
Крок 1: Підготовка HTML
Почнемо зі створення заготовки HTML-файлу. Додайте наступний код:
<!DOCTYPE html>
<html lang="uk">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles.css">
<title>Вспливаюче Вікно</title>
</head>
<body>
<button onclick="showPopup()">Відкрити Вікно</button><div class="popup" id="popup">
<div class="popup-content">
<span class="close" onclick="closePopup()">×</span>
<p>Це вспливаюче вікно. Додайте сюди свій контент.</p>
</div>
</div><script src="script.js"></script>
</body>
</html>
Крок 2: Стилізація за допомогою CSS
Додамо стилі для нашого вспливаючого вікна. Створіть файл styles.css та додайте наступний код:
body {
font-family: 'Arial', sans-serif;
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #f0f0f0;
}button {
padding: 10px;
font-size: 16px;
cursor: pointer;
}.popup {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
justify-content: center;
align-items: center;
}.popup-content {
background-color: #fff;
padding: 20px;
border-radius: 5px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
text-align: center;
}.close {
position: absolute;
top: 10px;
right: 10px;
font-size: 20px;
cursor: pointer;
color: #333;
}
Крок 3: Динаміка за допомогою JavaScript
Тепер додамо JavaScript для відображення та закриття вспливаючого вікна. Створіть файл script.js та додайте наступний код:
function showPopup() {
document.getElementById('popup').style.display = 'flex';
}function closePopup() {
document.getElementById('popup').style.display = 'none';
}
У цьому JavaScript ми використовуємо функції showPopup та closePopup для відображення та закриття вспливаючого вікна, відповідно.
Крок 4: Тестування
Відкрийте ваш HTML файл у веб-браузері. По кліку на кнопку "Відкрити Вікно", ви повинні бачити вспливаюче вікно з текстом та кнопкою закриття.
Тепер ви вивчили, як створити вспливаюче вікно на JavaScript. Використовуйте ці базові концепції для розробки більш складних та інтерактивних компонентів на вашому веб-сайті. Успіхів у ваших проектах!
Якщо у вас виникли питання, вбо ви бажаєте записатися на індивідуальний урок, замовити статтю (інструкцію) або придбати відеоурок, пишіть нам на: скайп: olegg.pann telegram, viber - +380937663911 додавайтесь у телеграм-канал: t.me/webyk email: oleggpann@gmail.com ми у fb: www.facebook.com/webprograming24 Обов`язково оперативно відповімо на усі запитіння
Поділіться в соцмережах
Подобные статьи:
