Сегодня ты научишься создавать всплывающее модальное окно в HTML CSS и JavaScript. Модальное окно - это тип раздела, который отображается в передней части веб-страницы и содержит информацию, предупреждения, ошибки и другие вещи. На самом деле, оно появляется, когда пользователь выполняет какое-либо действие на веб-странице. Аналогично, модели контента могут иметь разные размеры и формы.
Взгляните на приведенное видео нашего всплывающего модального окна. По сути, вверху есть значок галочки, а под этой галочкой есть какой-то текст, а под этим текстом есть две кнопки. Фактически, согласно этому проекту, данное модальное окно появится после того, как мы нажмем на кнопку, которая будет доступна до перехода к этому модальному окну. Мы можем закрыть это модальное окно, просто нажав на кнопку закрыть или на внешнюю часть модального окна, которая будет немного более темного цвета.
Как оно появляется, как мы можем его закрыть, и всю анимацию, которую я добавил в это модальное окно, вы можете посмотреть в видео.
Как вы видели на видео сначала на экране была кнопка с названием “Открыть модальное”, когда я нажал на эту кнопку, кнопка исчезла и появилось модальное окно, а также немного темного цвета за модальным полем. По вашему желанию модальное окно можно закрыть, нажав на кнопку закрыть или просто щелкнув по внешней стороне модального окна. Чтобы создать дизайн пользовательского интерфейса этого проекта, я просто использовал HTML и CSS, а чтобы открыть и закрыть его, я использовал некоторый код JavaScript.
0 Комментарии