Как сделать уведомление после нажатия кнопки html
Напишите функцию showNotification(options) , которая создаёт уведомление: с заданным содержимым. Уведомление должно автоматически исчезнуть через 1,5 секунды.
Пример объекта options :
// показывает элемент с текстом "Hello" рядом с правой верхней частью окна. showNotification(< top: 10, // 10px от верхней границы окна (по умолчанию 0px) right: 10, // 10px от правого края окна (по умолчанию 0px) html: "Hello!", // HTML-уведомление className: "welcome" // дополнительный класс для div (необязательно) >);Используйте CSS-позиционирование для отображения элемента в заданных координатах. Исходный документ имеет необходимые стили.
HTML. При нажатии на кнопку всплывает форма
Ребят, очень нужно. Как сделать так, чтобы при нажатии на кнопку всплывала форма с с полями, куда пользователь мог бы внести данные и тем самым зарегистрироваться.
document.getElementById('blablabla').style.display = 'none'; function blablabla()
Отслеживать
3,879 1 1 золотой знак 12 12 серебряных знаков 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,394 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; обязательны, то реализовать по другому.
Всплывающие сообщения для сайта на чистом JavaScript
Всплывающие сообщения – это ненавязчивый способ показа сообщений для пользователя. Они позволяют отображать уведомления пользователю заметным образом и не мешая при этом его взаимодействию с сайтом или веб-приложением.
Проект, рассматриваемый в рамках этой статьи, расположен на Github по адресу: https://github.com/itchief/ui-components/tree/master/toast
Он написан на чистом JavaScript без использования сторонних библиотек.
По умолчанию всплывающие сообщения отображаются в правом верхнем углу. При этом они могут выводиться как с заголовком, так и без него.
Подключение и использование
Компонент для показа всплывающих уведомлений состоит из 2 файлов: «toast.css» и «toast.js». Преимуществом данной библиотеки состоит в том, что она имеет очень маленький размер («toast.min.js» немного больше 1Кбайта). В отличие от библиотеки jGrowl эти сообщения не требуют библиотеку jQuery, что для многих сайтов очень важно.
Подключение компонента осуществляется посредством:
- включения на страницу стилей «toast.min.css»;
- добавления JavaScript кода «toast.js».
Вывод всплывающего сообщения на страницу осуществляется посредством создания экземпляра объекта Toast :
JavaScript
/* title - название заголовка text - текст сообщения theme - тема autohide - нужно ли автоматически скрыть всплывающее сообщение через interval миллисекунд interval - количество миллисекунд через которые необходимо скрыть сообщение */ new Toast({ title: 'Заголовок', text: 'Сообщение. ', theme: 'light', autohide: true, interval: 10000 });Если нужно создать сообщение без заголовка, то нужно просто ключу title установить значение false :
JavaScript
// без заголовка new Toast({ title: false, text: 'Сообщение. ', theme: 'light', autohide: true, interval: 10000 });Подробное описание
Создание HTML кода всплывающих сообщений как с заголовком, так и без него выполняется в JavaScript. Целью является создание следующей структуры:
Сообщение. Заголовок Сообщение. HTML код сообщений простой. Он состоит из элемента с классом toast , в котором в зависимости от типа уведомления расположены два или три элемента:
- с классом toast__header — заголовок;
- с классом toast__body — элемент, в котором выводится само сообщение;
- с классом toast__close — кнопка, для закрытия сообщения.
С помощью классов в CSS добавляются стили к этим элементам:
/* CSS-переменные */ :root { --toast-border-radius: 0.25rem; --toast-theme-default: #fff; } .toast { font-size: 0.875rem; background-clip: padding-box; border: 1px solid rgba(0, 0, 0, 0.05); border-radius: var(--toast-border-radius); box-shadow: 0 .125rem .25rem rgba(0, 0, 0, 0.075); display: none; position: relative; overflow: hidden; } .toast_default { color: #212529; background-color: var(--toast-theme-default); } .toast:not(:last-child) { margin-bottom: 0.75rem; } .toast__header { position: relative; padding: 0.5rem 2.25rem 0.5rem 1rem; background-color: rgba(0, 0, 0, 0.03); border-bottom: 1px solid rgba(0, 0, 0, 0.05); } .toast__close { content: ""; position: absolute; top: 0.75rem; right: 0.75rem; width: 0.875em; height: 0.875em; background: transparent url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23000'%3e%3cpath d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z'/%3e%3c/svg%3e") center/0.875em auto no-repeat; border: 0; opacity: 0.5; cursor: pointer; transition: opacity 0.1s ease-in-out; } .toast__close:hover { opacity: 1; } .toast__body { padding: 1rem; } .toast_message .toast__body { padding-right: 2.25rem; }Класс toast__close ещё используется в обработчике события click . При нажатии на эту кнопку выполняется закрытие сообщения.
JavaScript
this._el.addEventListener('click', (e) => { if (e.target.classList.contains('toast__close')) { // вызываем метод, скрывающий сообщение this._hide(); } });После того как JavaScript добавляет HTML код всплывающего сообщения на страницу, оно не отображается, т.к. по умолчанию оно имеет display: none . Его показ осуществляется после того, как к нему добавляется класс toast_show .
.toast_show { display: block; }Скрытие сообщения выполняется путём удаления класса toast_show .
Задание темы осуществляется посредством добавления класса.
Например, тема primary устанавливается так:
Помещение элементов .toast выполняется в контейнер .toast-container . Его создание тоже осуществляется с помощью JavaScript, но только в том случае, если его нет на странице.
JavaScript
if (!document.querySelector('.toast-container')) { const container = document.createElement('div'); container.classList.add('toast-container'); document.body.append(container); }Данный элемент по умолчанию располагается в правом верхнем углу страницы и имеет ширину 270 пикселей. Если нужно расположить в другом месте, то измените стили.
:root { --toast-width: 270px; } .toast-container { position: fixed; top: 15px; right: 15px; width: var(--toast-width); }Написан код JavaScript в виде класса и имеет следующую структуру:
JavaScript
class Toast { constructor(params) { . } _show() { . } _hide() { . } _create() { . } }Как сделать уведомление после нажатия кнопки html
Атрибут значения элементов elements’ value содержит строку DOMString , которая используется в качестве метки кнопки.
input type="button" value="Нажми на меня" />
Если вы не укажете value , вы получите пустую кнопку:
input type="button" />
Использование кнопок
Элементы не имеют поведения по умолчанию (их двоюродные братья, (en-US) и (en-US) используются для отправки и сброса форм соответственно). Чтобы кнопки делали что-либо, вы должны написать код JavaScript для выполнения работы.
Простая кнопка
Мы начнём с создания простой кнопки с обработчиком события click (en-US) , который запускает наш компьютер (ну, он переключает value кнопки и текстовое содержимое следующего абзаца):
form> input type="button" value="Запустить ПК" /> form> p>ПК выключен.p>
const button = document.querySelector("input"); const paragraph = document.querySelector("p"); button.addEventListener("click", updateButton); function updateButton() if (button.value === "Запустить ПК") button.value = "Выключить ПК"; paragraph.textContent = "ПК запущен!"; > else button.value = "Запустить ПК"; paragraph.textContent = "ПК выключен."; > >
Сценарий получает ссылку на объект HTMLInputElement (en-US), представляющий в DOM, сохраняя этот параметр в переменной button . Затем addEventListener() используется для установки функции, которая будет запускаться, когда на кнопке происходят события click (en-US) .
Добавление сочетаний клавиш на кнопки
Сочетания клавиш, также известные как клавиши доступа и их эквиваленты на клавиатуре, позволяют пользователю активировать кнопку с помощью клавиши или комбинации клавиш на клавиатуре. Чтобы добавить сочетание клавиш к кнопке — точно так же, как вы сделали бы с любым , для которого это имеет смысл, — вы используете глобальный атрибут accesskey .
В этом примере, s это специфичная клавиша доступа (ты должен нажать s плюс конкретные клавиши-модификаторы для вашей комбинации браузера и операционной системы; вы можете увидеть полный список на странице accesskey).
form> input type="button" value="Включить ПК" accesskey="s" /> form> p>ПК выключен.p>
const button = document.querySelector("input"); const paragraph = document.querySelector("p"); button.addEventListener("click", updateButton); function updateButton() if (button.value === "Включить ПК") button.value = "Выключить пк"; paragraph.textContent = "ПК включён!"; > else button.value = "Включить ПК"; paragraph.textContent = "ПК выключен."; > >
Примечание: Проблема с приведенным выше примером, конечно, заключается в том, что пользователь не будет знать, что такое ключ доступа! На реальном сайте вам пришлось бы предоставлять эту информацию таким образом, чтобы это не противоречило дизайну сайта (например, путем предоставления легкодоступной ссылки, которая указывает на информацию о том, что такое ключи доступа к сайту).
Выключенные / Включённые кнопки
Чтобы выключить кнопку необходимо просто добавить на неё глобальный атрибут disabled , вот так:
input type="button" value="Я выключена" disabled />
Вы можете включать и отключать кнопки во время выполнения, просто установив disabled вместо true или false . В этом примере наша кнопка изначально включена, но если вы нажмете ее, она будет отключена с помощью button.disabled = true . А setTimeout() затем функция используется для возврата кнопки обратно в ее включённое состояние через две секунды.
input type="button" value="Enabled" />
const button = document.querySelector("input"); button.addEventListener("click", disableButton); function disableButton() button.disabled = true; button.value = "Выключена"; window.setTimeout(function () button.disabled = false; button.value = "Включена"; >, 2000); >
Если атрибут disabled не указан, то кнопка наследует своё disabled состояние из своего родительского элемента. Это позволяет включать и отключать группы элементов одновременно, заключая их в контейнер, такой как элемет, и затем установить disabled на контейнер.
Приведенный ниже пример показывает это в действии. Это очень похоже на предыдущий пример, за исключением того, что атрибут disabled устанавливается в при нажатии первой кнопки — это приводит к отключению всех трех кнопок до истечения двухсекундного тайм-аута.
fieldset> legend>Button grouplegend> input type="button" value="Button 1" /> input type="button" value="Button 2" /> input type="button" value="Button 3" /> fieldset>
const button = document.querySelector("input"); const fieldset = document.querySelector("fieldset"); button.addEventListener("click", disableButton); function disableButton() fieldset.disabled = true; window.setTimeout(function () fieldset.disabled = false; >, 2000); >
Примечание: Firefox, в отличие от других браузеров, по умолчанию сохраняет динамическое отключенние состояния из одного при загрузке разных страниц. Используйте атрибут autocomplete для управления этой функцией.
Валидация
Кнопки не участвуют в проверке валидации; они не имеют реальной ценности для валидации.
Примеры
div class="toolbar"> input type="color" aria-label="select pen color" /> input type="range" min="2" max="50" value="30" aria-label="select pen size" />span class="output">30span> input type="button" value="Clear canvas" /> div> canvas class="myCanvas"> p>Добавьте подходящий фолбэк здесь.p> canvas>
body background: #ccc; margin: 0; overflow: hidden; > .toolbar background: #ccc; width: 150px; height: 75px; padding: 5px; > input[type="color"], input[type="button"] width: 90%; margin: 0 auto; display: block; > input[type="range"] width: 70%; > span position: relative; bottom: 5px; >
let canvas = document.querySelector(".myCanvas"); let width = (canvas.width = window.innerWidth); let height = (canvas.height = window.innerHeight - 85); let ctx = canvas.getContext("2d"); ctx.fillStyle = "rgb(0,0,0)"; ctx.fillRect(0, 0, width, height); let colorPicker = document.querySelector('input[type="color"]'); let sizePicker = document.querySelector('input[type="range"]'); let output = document.querySelector(".output"); let clearBtn = document.querySelector('input[type="button"]'); // covert degrees to radians function degToRad(degrees) return (degrees * Math.PI) / 180; > // update sizepicker output value sizePicker.oninput = function () output.textContent = sizePicker.value; >; // store mouse pointer coordinates, and whether the button is pressed let curX; let curY; let pressed = false; // update mouse pointer coordinates document.onmousemove = function (e) curX = window.Event ? e.pageX : e.clientX + (document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft); curY = window.Event ? e.pageY : e.clientY + (document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop); >; canvas.onmousedown = function () pressed = true; >; canvas.onmouseup = function () pressed = false; >; clearBtn.onclick = function () ctx.fillStyle = "rgb(0,0,0)"; ctx.fillRect(0, 0, width, height); >; function draw() if (pressed) ctx.fillStyle = colorPicker.value; ctx.beginPath(); ctx.arc( curX, curY - 85, sizePicker.value, degToRad(0), degToRad(360), false, ); ctx.fill(); > requestAnimationFrame(draw); > draw();
Спецификации
| Specification |
|---|
| HTML Standard # button-state-(type=button) |
Совместимость с браузерами
BCD tables only load in the browser