Всплывающее окно HTML и CSS при нажатии на кнопку + Примеры

Владислав Белецкий
Владислав Белецкий .
Категория:
Комментариев: 0

Содержание

Задача. Необходимы простые, несложные заготовки всплывающего окна на HTML (popup-окно, модальное окно).

Решение. Можно использовать несколько примеров, как на HTML и CSS, так и с использованием JavaScript.

Заготовка простого всплывающего popup-окна на HTML и CSS

Всего нужно будет три блока кода:

  • HTML модального окна (изначально оно будет скрыто);
  • HTML вывода ссылки при нажатии на которые будет появляться popup окно;
  • CSS-стили благодаря которым модальное окно будет появляться или скрываться.
Пример: Что такое всплывающее окно

ОТКРЫТЬ ОКНО

Используем Код №1:

Код №1: Заготовка простого всплывающего popup-окна HTML + CSS

Заготовка в плагине для WordPress

Решение 2. Собрал простой плагин popup-окон для сайтов на WordPress. В нем всего 3 файла: .php — макет окон; .js — привязка к триггеру; .css — стили. Пример содержимого в Кодах 2.

Собственно, решил сделать кастомное решение в ситуации, когда кнопки-триггеры на карточке товаров подгружались уже после загрузки всего документа, Ajax-ом. Поэтому попап-формы реализуемые плагинами не срабатывали — скрипт плагина загрузился, собрал триггеры на странице, но нужных мне кнопок еще нет, они появятся при взамодействии пользователя с карточками товаров. А используя кастомное решение, можно в кнопку с тригером вставить событие onfocus, которое будет запускать функцию привязки тригера к окну — onmouseover="showModal(trigger, idForm)".

Код 2.1: popup-custom-qfurs.php

В файле popup-custom-qfurs.php подключаем скрипты и стили правильно. Если делать не через плагин, следовательно нужно будет заменить путь к файлам и функцию plugin_dir_url(__FILE__) на функцию для темы.

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

Код 2.2: Файл script.js
В файле script.js активируем popup функцией showModal(), где первым параметром задаем триггер — класс кнопки или элемента по клику на который должно появиться окно, вторым параметром указываем id формы которая должна открыться.

Код 2.3: Файл стилей style.css

Примеры всплывающего окна на сайте

Несколько примеров из Codepen, на которые можно перейти и посмотреть более подробно.

Модальные окна на HTML и CSS

See the Pen
Модальные всплывающие окна с помощью CSS3 без Javascript by vavik (@vavik96)
on CodePen.

Пример popup-окна №1: HTML и CSS

See the Pen
Pop-up design by fajjet (@fajjet)
on CodePen.

Пример всплывающего окна №2: HTML и CSS

See the Pen
Pop Up Login Form by Afdallah Wahyu Arafat (@codot)
on CodePen.

Пример всплывающей формы входа №3: HTML и CSS

Модальные окна с JavaScript

See the Pen
Responsive Modal Design by qfurs (@qfurs)
on CodePen.

Пример popup-окна №1: HTML, CSS, JS

See the Pen
Resposive Pop-up on css3 by Daniel (@31russ)
on CodePen.

Пример попап-окна №2: HTML, CSS, JS

See the Pen
Pop-up Dialog Box (LIGHTBOX) by Dominic Francois (@DominicFrancois)
on CodePen.

Пример модального окна №3: HTML, CSS, JavaScript

See the Pen
Responsive CSS and JS Pop-up by Rachel Bull (@rachel_web)
on CodePen.

Пример всплывающего окна №4: HTML, CSS, JavaScript

See the Pen
Smart Welcome Popup by Harjeet Singh (@sharjeet)
on CodePen.

Пример модального окна приветствия №5: HTML, CSS, JavaScript

See the Pen
Daily UI 016 — Pop Up (ReactJs) by Chase Allbee (@ChaseAllbee)
on CodePen.

Пример модального окна №6: HTML, CSS, JavaScript

See the Pen
Modal Animations by qfurs (@qfurs)
on CodePen.

Пример модального окна №7: Подборка нескольких всплывающих окон на HTML, CSS и JavaScript

See the Pen
Custom popup modal In pure javascript by sajid ali (@sajidnagari)
on CodePen.

Пример модального окна №8: Кастомное всплывающее окно на HTML, CSS + JavaScript

See the Pen
Responsive Popup Modal by iilhamriz (@iilhamriz)
on CodePen.

Пример модального окна №9: Адаптивное всплывающее окно на HTML, CSS + JavaScript
Подписаться
Уведомить о
guest
0 комментариев
Межтекстовые Отзывы
Посмотреть все комментарии