Как сделать уведомление после нажатия кнопки 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 золотой знак 2 2 серебряных знака 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 золотых знака 11 11 серебряных знаков 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; обязательны, то реализовать по другому.

Курсы javascript

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

Читать:

Почему не устанавливается эксплорер 11 на виндовс 10

07.10.2014, 18:50

Регистрация: 03.09.2014

Сообщений: 61

document.getElementById(‘yourId’).onclick = function() <
alert(‘message’);
>

07.10.2014, 18:54

Новичок на форуме

Регистрация: 07.10.2014

Сообщений: 2

Мне нужно вывести текст не в окне уведомлений, а чтобы открылось в отдельном окне, в котором можно будет размести текст и ссылки.

Как сделать, чтобы форма всплывала при клике на кнопку?

Мастер форм от GetResponse может помочь Вам в создании стандартной формы, которая появляется на Вашей странице, когда посетитель заходит на нее. При дополнительной настройке кода, Вы также можете настроить форму так, чтобы она появлялась при нажатии на ссылку или кнопку на Вашем сайте.

Всплывание формы при клике на кнопку

Откройте существующую форму или создайте новую. В Мастере форм нажмите на тело формы, а затем перейдите в меню справа. В свойствах отображения выберите Pop over, отредактируйте форму и нажмите Сохранить и опубликовать.

Редактирование скрипта

Для того чтобы форма всплывала при клике на какой-либо их элементов Вашего сайта, Вам необходимо использовать API JS. Вам необходимо разместить настройки в JSON формате внутри скрипта, скопированого из GetResponse (после сохранения и публикации).

Ниже В можете найти сниппеты, которые смогут помочь Вам в конфигурации данного кода API JS.

Настройка

Описание

«name» — REQUIRED — String — unique identifier

«selector» — OPTIONAL — Object

«clickToShow» — OPTIONAL — String — DOM element selector (html element on your website, when clicked shows form)

«clickToHide» — OPTIONAL — String — DOM element selector (html element on your website, when clicked close form)

Пример

Примечание:

JSON внутри тегов « должны быть корректны, нажмите http://jsonlint.com/ чтобы проверить скрипт.
Конфигурация не может быть использована для форм inline.

Вы также можете использовать API напрямую в JavaScript Code (отсылая к GRWF2 Object):

var myform = GRWF2.get("myuniqueformname") - get refference to "myuniqueformname" instance of Form object myform.show() - show form myform.hide() - hide form  < "name": "myuniqueform2" >var myform = GRWF2.get('myuniqueform2'), element = document.getElementById('button'); element.addEventListener("click", function()< myform.show(); >);

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

Примечание. Форма не появится для пользователей, которые уже заполнили форму, даже если они снова нажмут кнопку.