Назад к списку задач

Работа с позиционированием. Создание модального окна

Уровень: Начинающий

Задача по HTML и CSS: Работа с позиционированием - создание модального окна

Файлы задания

Скачайте файлы задания и создайте модальное окно, как на изображение, которое вы видите под заданием. После выполнения сравните с результатом.

  1. После блока с классом text создайте блок с классом modal
  2. В блоке с классом modal добавьте заголовок третьего уровня и напишите текст "Модальное окно"
  3. После заголовка в модальном окне добавьте абзац с произвольным текстом, можете использовать сайт-генератор случайного текста lipsum.com
  4. После абзаца добавьте две кнопки используя тег button с типом button
  5. В первой кнопке напишите текст "Принять", а во второй кнопке напишите текст "Отмена"
  6. Первая кнопка будет с классами btn и success, вторая с классами btn и cancel
  7. Создайте еще одну обычную кнопку, в которой вместо текста будет изображение, которое находится в папке img и задайте ей класс modal-close
  8. Переходим в CSS и стилизуем модальное окно. Ширина модального окна 320px, цвет фона белый, внутренний отступ 15px со всех сторон, позиционирование фиксированное. Позиция сверху 75px и по горизонтали по центру (используйте left: 50%; и отрицательный margin-left равный 1/2 ширины модального окна).
  9. Размер кнопки modal-close 20x20, кнопка должна выходить за пределы модального окна относительно его. Используйте отрицательные значения top, right равные размеру кнопки
  10. Кнопки success и cancel - должны идти в строку, иметь внутренний отступ сверху и снизу по 7px, слева и справа по 15px, шрифт и размер как у body. Фон кнопки success - #35bb27, а кнопки cancel - #f9861f, цвет текста белый.
  11. Перед модальным окном создайте блок с классом mask, фон которой должен быть черным с непрозрачностью 80%. Маска должна быть фиксированной, на всю ширину и высоту, перекрывать контент, но не модальное окно.
  12. Дополнительно: Попробовать переделать структуру модального окна используя flexbox. Блок модального окна на всю ширину и высоту с фоном как у маски, внутри контент модального окна со стилями как у modal. При помощи свойств флексбоксов выравниваем контент модального окна по центру по горизонтали. Смотрите результат реализации во втором примере. Данный способ реализации немного проще, гибче и предпочтительней. Но первый способ нужен для практики.


Назад к списку задач

Если хотите поделиться своим решением, используйте сайты типа codepen.io и оставляйте ссылку в комментарии

Обсуждение (0)

Войдите или зарегистрируйтесь для того чтобы оставлять комментарии