Js confirm: Взаимодействие: alert, prompt, confirm

Leave a Comment / Js / By /

confirm() — JavaScript — Дока

  1. Кратко
  2. Пример
  3. Как пишется
  4. Как понять
  5. На практике
    1. Дока Дог советует

Кратко

Скопировано

При помощи функции confirm() можно вывести на экран пользователя модальное окно с текстом и кнопками «Ок» и «Отмена».

🤖

Из-за того, что окно модальное — работа с интерфейсом браузера и страницами будет заблокирована. Это неудобно, плюс может восприниматься пользователем как попытка ограничивать его свободу. Модальное окно для пользователя — окно, которое блокирует работу пользователя с браузером до тех пор, пока пользователь это окно не закроет.

Пример

Скопировано

Открыть демо в новой вкладке

💡 Это крайне быстрый вариант кода, который взаимодействует с пользователем, но окно созданное таким образом не изменяется через CSS, а значит использовать его лучше только для прототипирования интерфейса. В финальном варианте веб-страницы использовать модальное окно нежелательно.

Как пишется

Скопировано

confirm() принимает один аргумент — это текст, который появится в модальном окне.

Результат работы confirm() можно записать в переменную:

var answer1 = confirm('Подтвердите удаление')
          var answer1 = confirm('Подтвердите удаление')

Если не передать никакие аргументы, то пользователь увидит просто пустое окно с кнопками. Если появление окна следовало из какого-то действия, то пользователь может догадаться, что от него хотят. Но лучше, чтобы текст в модальном окне был написан — не надо бесить пользователей.

Как понять

Скопировано

Аргумент для confirm() должен быть строкой. Если это не так, то JavaScript автоматически приведёт его к строке.

Такое поведение не доставляет проблем, пока аргумент является примитивом или встроенным типом, имеющим правила приведения к строке. Если же в функцию передать объект, то получится непонятно:

confirm('Подтвердите переход на страницу')// Текст: 'Подтвердите переход на страницу'confirm({ message: 'Подтвердите переход' })// '[object Object]'
          confirm('Подтвердите переход на страницу')
// Текст: 'Подтвердите переход на страницу'
confirm({ message: 'Подтвердите переход' })
// '[object Object]'

💡 Результат вызова confirm() — булево значение: true если нажать «Окей» и false если нажать «Отмена».

var result = confirm('Удалить элемент?')if (result) {  alert('Элемент удален!')} else {  alert('Операция прервана')}
          var result = confirm('Удалить элемент?')
if (result) {
  alert('Элемент удален!')
} else {
  alert('Операция прервана')
}
Открыть демо в новой вкладке

На практике

Скопировано

Дока Дог советует

Скопировано

🛠 Пример использования confirm() с самостоятельно созданным диалоговым окном:

Открыть демо в новой вкладке

Если вы нашли ошибку, отправьте нам пул-реквест!

Во время отправки формы что-то пошло не так. Попробуйте ещё раз?

←

prompt()

ctrl + alt + ←

→

queueMicrotask()

ctrl + alt + →

Сделайте свои JavaScript-оповещения и окна подтверждения более привлекательными за 10 минут

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

В этом мы собираемся проверить, как мы можем превратить встроенное окно подтверждения браузера в модели Bootstrap и спроектировать его по-вашему, чтобы придать вашему приложению восхитительный вид. Для этого мы будем использовать гем «data-confirm-modal».

Начнем!

Шаг 1: Прежде всего создайте новое приложение Rails.

$ rails new CustomConfirmBox

Шаг 2: Добавьте следующие гемы в ваш gemfile:

Шаг 3: Включите следующие строки в ваш application.js.

Шаг 4: Импортируйте начальную загрузку, добавив эту строку в application.scss.

@import "начальная загрузка";

Теперь перезагрузите браузер и вуаля!!

Вы можете увидеть огромную разницу в новых окнах подтверждения или предупреждений.

<%= link_to 'Уничтожить', пользователь, метод: :удалить, данные: { подтвердить: 'Вы уверены?' } %>

До:

После:

Давайте настроим окно подтверждения, используя атрибуты данных, указанные ниже:

Заголовок: Отображать текст как модальный заголовок.

Фиксация: Текст для кнопки успеха.

Отмена: Текст для кнопки отмены.

Проверка: Текст для проверки.

Verify Text: Информационное сообщение для пользователя, содержащее текст, который пользователь должен ввести для проверки.

Давайте посмотрим еще несколько примеров с настройкой с использованием вышеуказанных свойств.

<%= link_to 'Удалить', пользователь, метод: :delete, id: 'delete_link',data: { подтвердить: 'Вы действительно хотите удалить его?', title: 'Подтвердить удаление' } %>

Эта ссылка создает окно подтверждения, как показано на рисунке ниже.

Мы также можем изменить метки кнопок фиксации и отмены.

<%= link_to 'Удалить', пользователь, метод: :delete, id: 'delete_link',data: { подтвердить: 'Вы действительно хотите удалить его?', title: 'Подтвердить удаление', совершить: ' YES", отмена: 'NO' } %>

Если мы добавим подтверждение: ‘Да’, verify_text: ‘Введите «Да», чтобы подтвердить атрибуты данных, вы увидите окно подтверждения, как показано на изображении ниже. По умолчанию кнопка подтверждения отключена, как только вы напишете действительный текст в данной текстовой области, тогда она активирует кнопку подтверждения.

*Обратите внимание, что регистр чувствителен.

Мы можем установить глобальные значения и также можем применить пользовательский класс CSS к модальным окнам всплывающих окон.

Давайте рассмотрим еще несколько интересных примеров для лучшего понимания:

1. Добавьте один файл javascript с именем: confirm-modal.js и добавьте следующий код.

2. Требовать этот файл js в application.js следующей строкой.

//= требуется модальное подтверждение

3. Добавьте указанный код в ваш файл scss.

4. Дайте ссылку для модального подтверждения.

<%= link_to 'Уничтожить', пользователь, метод: :удалить, данные: { подтвердить: 'Хотите продолжить?' } %>

В приведенном выше примере будет создано окно подтверждения, как показано ниже:

Мы можем восстановить настройки по умолчанию, используя dataConfirmModal. restoreDefaults() .

Надеюсь, вам понравилась эта статья. Продолжайте следить за другими такими статьями.

Вы можете получить доступ к полной кодовой базе в этом репозитории git:

https://github.com/TejasviniParikhbtc/CustomConfirmBox

Приятного вам программирования!

Щелкните здесь, чтобы получить более подробную информацию…

В BoTree Technologies мы создаем корпоративные приложения с нашей командой веб-разработчиков, состоящей из более чем 30 инженеров.

Мы также специализируемся на RPA, AI, Python, Django, JavaScript и ReactJS.

Консультации бесплатны – позвольте нам помочь вам расти!

Переход на другую страницу через диалог подтверждения с переменными значениями — JavaScript — Форумы SitePoint

СтивенХу 1

Можно ли передавать переменные в диалоговом окне подтверждения JS? Прямо сейчас переменные передаются буквально вместо того, чтобы передавать их значения переменных. В этом случае переменная $id не передается:

Внизу страницы, прямо над закрывающим тегом :

 <скрипт>

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *