Как сделать уведомление после нажатия кнопки html

HTML. При нажатии на кнопку всплывает форма

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

document.getElementById('blablabla').style.display = 'none'; function blablabla()

Показать форму 
 
Ім'я: Прізвище: Телефон: Опис: Отправить 
 

Отслеживать
3,869 1 1 золотой знак 11 11 серебряных знаков 20 20 бронзовых знаков
задан 25 мая 2019 в 17:31
JuniorLittle JuniorLittle
191 1 1 золотой знак 3 3 серебряных знака 13 13 бронзовых знаков
А информацию о пользователях где будете хранить?
– user256824
25 мая 2019 в 17:45
@РустамГимранов база данных
25 мая 2019 в 17:47
Просто из вопроса не понятно, что уже сделано, что делаете, где не получается.
– user256824
25 мая 2019 в 17:49
Где ваши попытки решить задачу?
25 мая 2019 в 17:55
@РустамГимранов У меныя лишь форма с отправкйо данных в базу (инпути и батон)
25 мая 2019 в 18:07

2 ответа 2

Сортировка: Сброс на вариант по умолчанию

Через display: none/block , если нужно.

const button = document.querySelector('button'); const form = document.querySelector('#blablabla'); button.addEventListener('click', () => < form.classList.add('open'); >);

#blablabla < display: none; animation-duration: 1.5s; animation-fill-mode: both; animation-name: fadeIn; >#blablabla.open < display: block; >@keyframes fadeIn < from < opacity: 0; >to < opacity: 1; >>

Показать форму 
 
Ім'я: Прізвище: Телефон: Опис: Отправить 
 

UPD. С Popup окном. (Может пригодится)

const button = document.querySelector('button'); const form = document.querySelector('#blablabla'); const popup = document.querySelector('.popup'); button.addEventListener('click', () => < form.classList.add('open'); popup.classList.add('popup_open'); >);

#blablabla < display: none; animation-duration: 1.5s; animation-fill-mode: both; animation-name: fadeIn; >#blablabla.open < display: block; >.popup < position: fixed; width: 100%; height: 100%; top: 0; left: 0; background: rgba(17, 17, 17, 0.5); transition: all 0.5s ease; display: none; >.popup_open < display: block; >.popup__container < position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background: #fff; border-radius: 10px; max-width: 588px; width: 100%; >.popup__wrapper < padding: 40px; >@keyframes fadeIn < from < opacity: 0; >to < opacity: 1; >>

Показать форму 
 
 
 
 
Ім'я: Прізвище: Телефон: Опис: Отправить 
 
 
 
 

Отслеживать
ответ дан 26 мая 2019 в 7:01
7,404 2 2 золотых знака 12 12 серебряных знаков 25 25 бронзовых знаков

Чтобы форма всплывала, можно реализовать это по разному.

Лично я думаю, что автор говоря всплывала , имеет ввиду плавность. Конечно, можно добиться плавности и с помощью js , но лучше css .

И еще один важный момент: свойство display:none; && display:block; Трансформации не поддаются. Так что если нужна плавность без opacity не обойтись.

const formWrap = document.getElementById('form-wrap'); function openForm()

#form-wrap < opacity: 0; transition: opacity .5s; >#form-wrap.open

Показать форму 
 
Ім'я: Прізвище: Телефон: Опис: Отправить 
 

P.S. А если все же display:none; && display:block; обязательны, то реализовать по другому.

Всплывающее 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
• кнопка подписки

Пропишем стили для самого 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.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

1. Кнопка:
   Она выглядит вот так:
2. Текстовая ссылка:
   Она выглядит вот так: Как создать свой сайт
3. BB-код ссылки для форумов (например, можете поставить её в подписи):

Комментарии ( 0 ):

Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.

Copyright © 2010-2024 Русаков Михаил Юрьевич. Все права защищены.

Событие onclick

Событие onclick возникает при щелчке левой кнопкой мыши на элементе, к которому добавлен атрибут onclick .

Синтаксис

onclick="скрипт"

Значения

Значение по умолчанию

Применяется к тегам

Пример

HTML5 IE Cr O Sa Fx

     function isEmail() < var str = document.getElementById("email").value; var status = document.getElementById("status"); var re = /^[^\s()<>@,;:\/]+@\w[\w\.-]+\.[a-z]$/i; if (re.test(str)) status.innerHTML = "Адрес правильный"; else status.innerHTML = "Адрес неверный"; if(isEmpty(str)) status.innerHTML = "Поле пустое"; > function isEmpty(str)  
Введите адрес электронной почты и нажмите кнопку «Проверить»
 

В данном примере при щелчке по кнопке формы срабатывает событие onclick и идет вызов функции с именем isEmail() , которая проверяет, корректно ли введен адрес электронной почты. При этом справа от поля выводится сообщение об ошибке или наоборот, правильности ввода данных.

Статьи по теме

• Давайте порисуем
• Ссылки во фреймах

Не выкладывайте свой код напрямую в комментариях, он отображается некорректно. Воспользуйтесь сервисом cssdeck.com или jsfiddle.net, сохраните код и в комментариях дайте на него ссылку. Так и результат сразу увидят.

Типы тегов

HTML5

Блочные элементы

Строчные элементы

Универсальные элементы

Нестандартные теги

Осуждаемые теги

Видео

Документ

Звук

Изображения

Объекты

Скрипты

Списки

Ссылки

Таблицы

Текст

Форматирование

Формы

Фреймы

Как сделать — Всплывающую форму

Узнать, как создать всплывающую форму с помощью CSS и JavaScript.

Создать всплывающую форму

Шаг 1) Добавить HTML

Используйте элемент для обработки входных данных. Вы можете узнать больше об этом в нашем PHP учебнике.

Пример

Шаг 2) Добавить CSS:

Пример

/* Кнопка, используемая для открытия контактной формы — фиксируется в нижней части страницы */
.open-button background-color: #555;
color: white;
padding: 16px 20px;
border: none;
cursor: pointer;
opacity: 0.8;
position: fixed;
bottom: 23px;
right: 28px;
width: 280px;
>

/* Всплывающая форма-скрыта по умолчанию */
.form-popup display: none;
position: fixed;
bottom: 0;
right: 15px;
border: 3px solid #f1f1f1;
z-index: 9;
>

/* Добавить стили для контейнера формы */
.form-container max-width: 300px;
padding: 10px;
background-color: white;
>

/* Поля ввода полной ширины */
.form-container input[type=text], .form-container input[type=password] width: 100%;
padding: 15px;
margin: 5px 0 22px 0;
border: none;
background: #f1f1f1;
>

/* Когда входы получают фокус, сделайте что-нибудь */
.form-container input[type=text]:focus, .form-container input[type=password]:focus background-color: #ddd;
outline: none;
>

/* Установите стиль для кнопки отправить/войти */
.form-container .btn background-color: #4CAF50;
color: white;
padding: 16px 20px;
border: none;
cursor: pointer;
width: 100%;
margin-bottom:10px;
opacity: 0.8;
>

/* Добавить красный цвет фона для кнопки «Отмена» */
.form-container .cancel background-color: red;
>

/* Добавить некоторые эффекты наведения на кнопки */
.form-container .btn:hover, .open-button:hover opacity: 1;
>

Шаг 3) Добавить JavaScript:

Пример

function openForm() <
document.getElementById(«myForm»).style.display = «block»;
>

function closeForm() document.getElementById(«myForm»).style.display = «none»;
>

Совет: Зайдите на наш учебник HTML Форм чтобы узнать больше о формах HTML.

Совет: Зайдите на наш учебник CSS Форм чтобы узнать больше о том, как стилизовать элементы формы.