Всплывающее Popup окно после нажатия на кнопку
В целях экономии места на сайте, не обязательно постоянно показывать на сайте форму подписки. Достаточно одной кнопки. Если пользователь хочет на что-то подписаться, то он вызывает форму подписки, кликая на кнопку. Popup окно содержит в себе эту самую форму подписки.
Создание кнопки
Создадим кнопку, при клике на которую появится Popup окно с формой подписки на новости.
@import url(‘https://fonts.googleapis.com/css?family=Poppins:100,200,300,400,500,600,700,800,900’);
* margin: 0;
padding: 0;
box-sizing: border-box;
font-family: ‘Poppins’, sans-serif;
>
body display: flex;
justify-content: center;
align-items: center;
min-height: 100vh
; background: #E57373;
>
.btn position: relative;/*относительное позиционирование*/
padding: 15px 20px;
background: #fff;
font-size: 18px;
display: inline-block;/*отображать как строчно-блочный элемент*/
text-decoration: none;
color: #E57373;
cursor: pointer;
font-weight: 500;
letter-spacing: 2px;/*расстояние между буквами*/
text-transform: uppercase;
transition: 0.5s;
>
Создание Popup окна
Внутри Popup окна находятся следующие элементы:
- иконка с закрывающим крестиком
- иконка с конвертом
- заголовок h2
- параграф с текстом
- поле для ввода email
- кнопка подписки
Join Our Newsletter
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Esse itaque blanditiis dolore vel placeat libero.
Пропишем стили для самого popup окна и его элементов. Затем спрячем окно, задав для селектора popup# свойство visibility: hidden.
#popup position: fixed;/*фиксированное позиционирование*/
top: -100%;/*прячем окно за пределы видимости*/
left: 50%;/*позиция окна слева*/
transform: translate(-50%,-50%);
z-index: 1000;/*на верхний слой*/
background: #fff;
width: 450px;
padding: 80px 50px 50px;
box-shadow: 0 15px 30px rgba(0,0,0,0.08);
transition: 0.5s;
visibility: hidden;/*скрываем окно*/
>
#popup.active visibility: visible;/*показываем окно*/
top: 50%;/*окно выдвигается сверху*/
>
#popup .content position: relative;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;/*направление главной оси*/
>
#popup .content img max-width: 80px;
>
#popup .content h2 font-size: 24px;
font-weight: 500;
color: #333;
margin: 20px 0 10px;
>
#popup .content p text-align: center;
font-size: 16px;
color: #333;
>
#popup .content .inputBox position: relative;
width: 100%;
margin-top: 20px;
display: flex;
justify-content: center;
align-items: center;
>
#popup .content .inputBox input width: 100%;
border: 1px solid rgba(0,0,0,0.2);
padding: 15px;
outline: none;
font-size: 18px;
>
#popup .content .inputBox input[type=»submit»] max-width: 150px;
background: #E57373;
color: #fff;
border: none;
>
.close position: absolute;
top: 30px;
right: 30px;
cursor: pointer;
>
Создание функции появления popup окна
Механизм действия функция очень простой — она находит элемент #popup и добавляет ему класс active. В классе active есть два свойства:
visibility: visible;/*показать popup*/
top: 50%;/*появление окна сверху*/
Повесим на кнопку подписки событие клика. При клике на кнопку, запускается функция popupToggle().
Переходите на видеокурс по JavaScript и приобретайте необходимые навыки для получения востребованной профессии frontend-разработчика.
Создано 05.11.2021 10:36:35
Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!
Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.
Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления
Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.
Порекомендуйте эту статью друзьям:
Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):
- Кнопка:
Она выглядит вот так: - Текстовая ссылка:
Она выглядит вот так: Как создать свой сайт - BB-код ссылки для форумов (например, можете поставить её в подписи):
Комментарии ( 0 ):
Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.
Copyright © 2010-2023 Русаков Михаил Юрьевич. Все права защищены.
Как сделать всплывающие окно при нажатии на кнопку?
Здравствуйте. У меня есть кнопка — https://jsfiddle.net/1s9L24qw/ . Помогите пожалуйста сделать так, чтобы при нажатии на неё появлялось окно с текстом привет.
- Вопрос задан более трёх лет назад
- 843 просмотра
Комментировать
Решения вопроса 1
Талян @flapflapjack
на треть я прав
Но сейчас у вас начнётся — а как сделать красивше, и т.д.
В общем если что, гугл: sweetalert
Делаем простое всплывающее окно на сайте
Бывают случаи, когда нужно сделать простое всплывающее окно без подключения различных библиотек, нагружающих страницу.
Задача: при клике на определенную ссылу/кнопку/блок и т.д. немного затемнить фон и посередине вывести определенное окно с информацией.
1) Скачиваем и подключаем jQuery
2) HTML
Есть две кнопки, при нажатии на которые выполняется функция show_popap(входной_параметр), где входной_параметр — id необходимого всплывающего окна. Например, первая кнопка вызовет «всплывающее окно 1″(у которого id=»modal-1″ ).
С вызовом окон все понятно. Как же их закрывать? В примере для этого использован тэг span с классом close_popap . Вы можете использовать любой другой тэг, будь это изображение, иконка или что-то еще. Главное задать для него класс close_popap .
как сделать всплывающее окно в js
Для создания всплывающего окна на странице вам понадобится HTML, CSS и JavaScript:
id="openModal">Нажми меня! id="modal" class="modal"> class="modal-content"> class="close">close Привет, я всплывающее окно! .modal display: none; position: fixed; z-index: 1; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; background-color: rgba(0, 0, 0, 0.4); > .modal-content /* some rules */ > .close /* some rules */ > const modal = document.querySelector('#modal'); const btn = document.querySelector('#openModal'); const close = document.querySelector('.close'); btn.onclick = function () modal.style.display = 'block'; >; close.onclick = function () modal.style.display = 'none'; >; window.onclick = function (event) if (event.target == modal) modal.style.display = 'none'; > >; В этом примере мы создали кнопку Нажми меня! , которая открывает всплывающее окно при клике на нее. Окно закрывается при нажатии на крестик или на любое место вне его области.