🚀 Веб-разработка с нуля: Урок 13 - Создаем модальное окно
Привет, разработчики! 👨💻👩💻
Сегодня научимся создавать профессиональные модальные окна для нашего To-Do List.
🔥 Что нового изучим:
1. Создание модальных окон на чистом CSS/JS
2. Работу с CSS-анимациями
3. Лучшие практики UX для модальных окон
💻 Практика: добавляем редактирование задач
1. Обновляем HTML:
<!-- Добавляем перед закрывающим </body> -->
<div id="modal" class="modal">
<div class="modal-content">
<span class="close">×</span>
<h2>Редактировать задачу</h2>
<input type="text" id="editInput">
<button id="saveEdit">Сохранить</button>
</div>
</div>
2. Добавляем новые стили:
.modal {
display: none;
position: fixed;
z-index: 100;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0.5);
animation: fadeIn 0.3s;
}
.modal-content {
background: white;
margin: 15% auto;
padding: 20px;
border-radius: 8px;
width: 80%;
max-width: 500px;
animation: slideDown 0.3s;
}
.close {
float: right;
font-size: 24px;
cursor: pointer;
}
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
@keyframes slideDown {
from {
transform: translateY(-50px);
opacity: 0;
}
to {
transform: translateY(0);
opacity: 1;
}
}
3. Модернизируем JavaScript:
// Добавляем в script.js
const modal = document.getElementById('modal');
const editInput = document.getElementById('editInput');
const saveEditBtn = document.getElementById('saveEdit');
let currentEditingTask = null;
// Показываем модальное окно при клике на задачу
document.querySelectorAll('#taskList li span').forEach(span => {
span.addEventListener('click', function() {
currentEditingTask = this;
editInput.value = this.textContent;
modal.style.display = 'block';
});
});
// Закрытие модального окна
document.querySelector('.close').addEventListener('click', closeModal);
window.addEventListener('click', function(e) {
if (e.target == modal) closeModal();
});
saveEditBtn.addEventListener('click', function() {
if (editInput.value.trim() !== '') {
currentEditingTask.textContent = editInput.value;
closeModal();
saveTasks();
}
});
function closeModal() {
modal.style.display = 'none';
editInput.value = '';
}
🎯 Что мы получили:
✅ Плавные анимации открытия/закрытия
✅ Возможность редактирования задач
✅ Затенение фона при открытии модалки
✅ Закрытие по клику вне окна
💡 Профессиональные советы:
1. Всегда добавляйте анимации для плавности интерфейса
2. Реализуйте закрытие по ESC:
document.addEventListener('keydown', function(e) {
if (e.key === 'Escape') closeModal();
});
3. Фокусируйте input при открытии:
editInput.focus();
👉 В следующем уроке:
Создадим drag&drop сортировку для нашего списка задач!
Подписывайтесь: [https://dzen.ru/id/5e6014a22273ad143e3932b5](https://t.me/rm_programmer)
Пишите, какие элементы интерфейса хотите научиться создавать! 💬
#вебразработка #javascript #модальноеокно #CSSанимации #UX
