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

Создать диалоговое окно с предупреждением с помощью 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 в 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 в Google Chrome

Окно подсказки 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, подтверждающий неправильный ответ

Похожие записи

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

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