Создание адаптивных модальных окон

Введение

В этом проекте вы научитесь создавать компонент модального окна, которое можно отображать и скрывать на веб-странице. Модальные окна широко используются в веб-приложениях для отображения дополнительного контента или форм без выхода на другую страницу.

👀 Предпросмотр

🎯 Задачи

В этом проекте вы научитесь:

• Как настроить HTML-структуру для модального окна
• Как реализовать функциональность отображения и скрытия модального окна
• Как обрабатывать всплытие событий, чтобы предотвратить повторное отображение модального окна после его скрытия

🏆 Достижения

После завершения этого проекта вы сможете:

• Создать модальное окно с использованием HTML, CSS и JavaScript
• Использовать функции JavaScript для управления видимостью модального окна
• Предотвратить всплытие событий, чтобы обеспечить правильное поведение модального окна

Настройте структуру проекта

В этом шаге вы настроите файлы и структуру проекта. Следуйте шагам ниже, чтобы выполнить этот шаг:

Откройте папку проекта. Структура каталогов следующая:

├── bootstrap.min.css
├── bootstrap.min.js
├── index.html
├── jquery.min.js
└── style.css

Нажмите кнопку Go Live в нижнем правом углу WebIDE, чтобы запустить проект.

Далее откройте "Web 8080" в верхней части ВМ и обновите его вручную, чтобы увидеть страницу.

Реализуйте функциональность показа и скрытия

В этом шаге вы научитесь реализовывать функциональность показа и скрытия модального окна.

1. Найдите раздел <script> внизу файла index.html.
2. В разделе <script> вы увидите следующий код:

// TODO
let signModalDoc = document.querySelector("#myModal");
function handleClick(e) {
  signModalDoc.style.display = "block";
  event.stopPropagation();
}
function handleOk(e) {
  signModalDoc.style.display = "none";
  event.stopPropagation();
}

3. Разберитесь с назначением каждой функции:

   • handleClick(e): Эта функция вызывается при нажатии на кнопку "Зарегистрироваться сейчас". Она устанавливает свойство display модального окна в 'block', что делает модальное окно видимым.
   • handleOk(e): Эта функция вызывается при нажатии на кнопку закрытия "X" или кнопку "OK" внутри модального окна. Она устанавливает свойство display модального окна в 'none', что скрывает модальное окно.

4. Строка event.stopPropagation() в обеих функциях используется для предотвращения всплытия клика до родительских элементов, что могло бы привести к повторному отображению модального окна после его скрытия.

Тестируйте функциональность

1. Сохраните файл index.html.
2. Обновите веб-страницу в вашем браузере.
3. Нажмите кнопку "Зарегистрироваться сейчас", чтобы увидеть появление модального окна.
4. Нажмите кнопку закрытия "X" или кнопку "OK" внутри модального окна, чтобы увидеть исчезновение модального окна. Финальный эффект должен быть таким:

Поздравляем! Вы успешно реализовали функциональность показа и скрытия для модального окна.

Резюме

Поздравляем! Вы завершили этот проект. Вы можете практиковаться в более многих лабораторных работах в LabEx, чтобы улучшить свои навыки.