TechBlogSD - Все для WordPress и WEB разработки
WEB и WordPress инструкции, новости, обзоры тем и плагинов

Как создать диалоговые окна с предупреждением, подсказкой и подтверждением с помощью JavaScript?

19

Создать диалоговое окно с предупреждением с помощью JavaScript

Диалоговое окно предупреждения – это всплывающее окно, которое появляется в браузере только с кнопкой «ОК», чтобы сообщить пользователям очень небольшое сообщение. Поле предупреждения должно использоваться для отображения предупреждающего сообщения или информационного сообщения. Например:

  • Приветственное сообщение пользователю при загрузке сайта
  • Результат проверки недействительного результата
  • Информация о времени простоя сайта или времени обслуживания.

Здесь мы обсуждаем, как создать всплывающее окно с предупреждением, используя JavaScript с примером кода. Узнайте больше о создании предупреждений в Bootstrap 4.

Как это работает?

Функция JavaScript alert() запускается, когда на странице вызывается скрипт, который отображает строковый аргумент во всплывающем окне предупреждения. Пока не появится окно предупреждения, браузер не продолжит загрузку веб-страницы.

Синтаксис

alert("Your Message Here");

Пример

Ниже приведен пример кода окна предупреждения в JavaScript. Это окно появится при загрузке страницы в качестве окна приветствия, и в нем будет возможность нажать кнопку «ОК» или закрыть диалоговое окно в таких браузерах, как Google Chrome. Как только пользователь нажимает «ОК» (или закрывает), изображение загружается. Браузер прекратит обработку страницы до тех пор, пока не появится окно с предупреждением.

<HTML> <HEAD> <TITLE>ALERT BOX EXAMPLE</TITLE> </HEAD> <BODY> <SCRIPT Language="JavaScript"> alert("Welcome to Our Website!!!"); document.write('<IMG SRC=""/>'); </SCRIPT> </BODY> </HTML>

Ниже показано окно предупреждения в браузере Chrome при выполнении вышеуказанного кода.

Как создать диалоговые окна с предупреждением, подсказкой и подтверждением с помощью JavaScript?

Окно оповещения JavaScript в Google Chrome

Создать диалоговое окно с подсказкой с помощью JavaScript

Диалоговое окно подсказки используется для отображения настроенного вывода на веб-странице на основе ввода пользователя. В отличие от окна предупреждения, которое используется для отображения короткого сообщения с одной кнопкой «ОК», окно подсказки имеет следующие особенности:

  • Отображение заранее заданного сообщения на коробке
  • Пользователь может ввести данные в текстовое поле
  • Пользовательский ввод передается обратно в скрипт
  • В окне подсказки есть две кнопки «ОК» и «Отмена».

Как это работает?

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

  • Сообщение, которое будет отображаться в окне подсказки
  • Текст по умолчанию для отображения в текстовом поле – это необязательно; вы можете оставить текст по умолчанию пустым
  • При нажатии кнопки «ОК» текст, введенный в поле, передается сценарию.
  • При нажатии кнопки «Отменить» значение NULL возвращается в сценарий.

Синтаксис

prompt ("Message", "Default Value");

Пример

prompt ("What is the color you like?", "Green");

Практический пример создания диалогового окна подсказки с использованием JavaScript

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

<HTML> <HEAD> <TITLE>PROMPT BOX EXAMPLE</TITLE> </HEAD> <BODY> <SCRIPT Language="JavaScript"> document.write("<h1>Greetings</h1>"); document.write(prompt("Enter Your Name: ", "Name")); document.write(" Welcome to Our Site!</h1>"); </SCRIPT> </BODY> </HTML>

Как это выглядит?

Ниже показано окно подсказки в браузере Chrome при выполнении вышеуказанного кода.

Как создать диалоговые окна с предупреждением, подсказкой и подтверждением с помощью JavaScript?

Окно подсказки JavaScript в Google Chrome

Когда пользователь вводит имя и нажимает кнопку «ОК», имя передается в сценарий, и все сообщения отображаются в соответствии с функцией document.write. Пустое пространство в поле ввода также считается допустимым именем в поле подсказки JavaScript.

Отображение окна подсказки с именем пользователя

Когда пользователь нажимает кнопку «Отмена», передается значение null и отображается в браузере вместо имени.

Отображение окна подсказки с нулевым значением

Создать диалоговое окно подтверждения с помощью JavaScript

Это третий тип диалогового окна, представленный в JavaScript, помимо окон подсказки и предупреждений. В этом разделе объясняется, как создать диалоговое окно подтверждения с помощью JavaScript, который используется для подтверждения действия, предпринятого пользователем.

Диалоговое окно подтверждения имеет следующие особенности:

  • Предопределенное сообщение, которое будет отображаться на коробке
  • Две кнопки – ОК и Отмена

Как это работает?

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

  • Значение true передается вызывающей программе при нажатии кнопки ОК.
  • Значение false передается вызывающей программе при нажатии кнопки Отмена.

Синтаксис

confirm ("Message");

Пример

confirm ("Do you want to close this window?");

Практический пример

Следующий код JavaScript использует метод подсказки, чтобы задать вопрос пользователю. Отображается окно подтверждения, чтобы показать, что ответ правильный или неправильный.

<HTML> <HEAD> <TITLE>CONFIRM BOX EXAMPLE</TITLE> </HEAD> <BODY> <SCRIPT Language="JavaScript"> var q = "What is 5+5?"; var a = 10; var c = "<h2>You are a Genius</h2>"; var ic = "<h2>Reload to Try Again</h2>"; var response = prompt(q,"0"); if (response != a) { alert("Wrong, Better Luck Next Time!!!"); } else { alert("Correct! Well done!!!"); } var o = (response == a)? c: ic; document.write("<BR/>"); document.write(o); </SCRIPT> </BODY> </HTML>

Как это выглядит?

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

Как создать диалоговые окна с предупреждением, подсказкой и подтверждением с помощью JavaScript?

JavaScript, подтверждающий правильный ответ

Как создать диалоговые окна с предупреждением, подсказкой и подтверждением с помощью JavaScript?

JavaScript, подтверждающий неправильный ответ

Источник записи: webnots.com
Leave A Reply

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