JavaScript поддерживает три важных типов диалоговых окон. Эти диалоговые окна могут быть использованы для вызывания исключения и оповещения, или получить подтверждение на любом входе или иметь вид ввода от пользователей. Здесь мы обсудим каждое диалоговое окно по очереди.
Диалоговое окно alert в основном используется для того чтобы дать предупреждение пользователям. Например, если в поле необходимо ввести текст, но пользователь не вводит, то как часть проверки, вы можете использовать окно предупреждения, чтобы сделать предупреждение.
Тем не менее, окно предупреждения по-прежнему можно использовать для дружелюбных сообщений. Окно оповещения дает только одну кнопку «OK», чтобы продолжить.
<html> <head> <script type="text/javascript"> <!-- function Warn() { alert ("Это предупреждающее сообщение!"); document.write ("Это предупреждающее сообщение!"); } //--> </script> </head> <body> <p>Нажмите следующую кнопку, чтобы увидеть результат: </p> <form> <input type="button" value="Click Me" onclick="Warn();" /> </form> </body> </html>
Диалоговое окно confirmation в основном используется для согласие пользователя на любой вариант. Оно отображает диалоговое окно с двумя кнопками: OK и Cancel.
Если пользователь нажимает на кнопку OK, функция confirm() возвращает окну true. Если пользователь нажимает на кнопку Cancel, то функция confirm() возвращает false. Вы можете использовать диалоговое окно подтверждения следующим образом:
<html> <head> <script type="text/javascript"> <!-- function getConfirmation(){ var AndreyExVal = confirm("Хотите продолжить?"); if( AndreyExVal == true ){ document.write ("Пользователь хочет продолжить!"); return true; } else{ document.write ("Пользователь не хочет продолжать!"); return false; } } //--> </script> </head> <body> <p>Нажмите следующую кнопку, чтобы увидеть результат: </p> <form> <input type="button" value="Click Me" onclick="getConfirmation();" /> </form> </body> </html>
Диалоговое окно prompt полезно, если вы хотите, чтобы появилось всплывающее текстовое поле, для получения пользовательского ввода. Таким образом, это позволяет взаимодействовать с пользователем. Пользователь должен заполнить поле и нажмите кнопку ОК.
Это диалоговое окно, используя функция prompt(), которая принимает два параметра: 1. Метка, которую вы хотите отобразить в текстовом поле и 2. Строка, по умолчанию для отображения в текстовом поле.
Это диалоговое окно содержит две кнопки: OK и Cancel. Если пользователь нажимает кнопку OK, функция prompt() возвращает окну введенное значение из текстового поля. Если пользователь нажимает на кнопку Отмена, функция prompt() возвращает окну null.
В следующем примере показано, как использовать диалоговое окно с запросом:
<html> <head> <script type="text/javascript"> <!-- function getValue(){ var retVal = prompt("Введите ваше имя : ", "your name here"); document.write("Вы вошли : " + retVal); } //--> </script> </head> <body> <p>Нажмите следующую кнопку, чтобы увидеть результат: </p> <form> <input type="button" value="Click Me" onclick="getValue();" /> </form> </body> </html>