Поиск по сайту:
...человек родится, чтобы жить в судорогах беспокойства и летаргии скуки (Ф. Вольтер).

JavaScript – Диалоговые окна

1 Звезда2 Звезды3 Звезды4 Звезды5 Звезд (1 оценок, среднее: 5,00 из 5)
Загрузка...
06.11.2017
JavaScript - диалоговые окна

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

Диалоговое окно alert

Диалоговое окно 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

Диалоговое окно 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 полезно, если вы хотите, чтобы появилось всплывающее текстовое поле, для получения пользовательского ввода. Таким образом, это позволяет взаимодействовать с пользователем. Пользователь должен заполнить поле и нажмите кнопку ОК.

Это диалоговое окно, используя функция 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>

 

Если вы нашли ошибку, пожалуйста, выделите фрагмент текста и нажмите Ctrl+Enter.

Если статья понравилась, то поделитесь ей в социальных сетях:

Это может быть вам интересно

0 0 голоса
Рейтинг статьи
Подписаться
Уведомить о
guest

**ссылки nofollow

0 комментариев
Старые
Новые Популярные
Межтекстовые Отзывы
Посмотреть все комментарии

Спасибо!

Теперь редакторы в курсе.