Модальные окна (попапы) на HTML CSS JavaScript. Всплывающие окна. Как это сделать?

• Создание структуры страницы с использованием классов и идентификаторов.  

• Создание тела модального окна и его содержимого.  

• Создание закрывающей кнопки и контента.  

• Верстка общей оболочки модального окна с использованием стилей.  

• Верстка контента модального окна с использованием отступов и размеров.  

• Верстка закрывающей кнопки и ее позиционирование.  

• Скрытие модального окна по умолчанию.  

• Создание событий при клике на ссылку для открытия модального окна.  

• Закрытие модального окна при клике на крестик или ссылку.  

• Добавление анимации для открытия и закрытия модального окна.  

• Добавление анимации для скрола контента при открытии модального окна.  

• Добавление анимации для скрытия и показа модального окна.  

• Видео объясняет, как создать эффект открытия попа с помощью свойства трансформ.  

• Демонстрируется, как плавно появляется фон и как по пап съезжает сверху.  

• Обсуждаются различные варианты анимации и их использование.  

• Видео объясняет, как использовать джава скрипт для открытия попа.  

• Объясняется, как получить все объекты с классом по пап линк и как использовать их для открытия попа.  

• Демонстрируется, как блокировать скрол и как использовать джава скрипт для закрытия попа.  

• Видео объясняет, как скрыть скрол и как это влияет на контент.  

• Демонстрируется, как использовать вычисление разницы между шириной вьюпорта и шириной объекта для получения ширины скрола.  

• Объясняется, как присвоить значение ширины скрола в виде паддинга справа и как это влияет на внешний вид контента.  

• В видео обсуждается блокировка скрола при открытии и закрытии попа.  

• Для этого используется функция "по пап клоуз", которая добавляет класс "лок" к объекту "боди".  

• Это позволяет заблокировать скрол и избежать дерганий контента при открытии и закрытии попа.  

• В видео также обсуждается закрытие попа по эскейпу.  

• Для этого используется функция "по пап клоуз", которая закрывает попа при нажатии клавиши "скейт" на клавиатуре.  

• В видео показано, как добавить картинку в попа.  

• Для этого создается новый объект "поп и мейдж", в который добавляется картинка.  

• Также обсуждается, как сделать картинку адаптивной и убрать полосу под картинкой с помощью свойства "вертикал лайн топ" для тега "ам джи".