Учебники

ES6 — Диалоговые окна

Декабрь 28, 2018

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

Диалоговое окно оповещения

Диалоговое окно оповещения в основном используется для отправки предупреждающего сообщения пользователям. Например, если одно поле ввода требует ввода некоторого текста, но пользователь не предоставляет никакого ввода, то в качестве части проверки можно использовать окно предупреждения для отправки предупреждающего сообщения.

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

пример 

<html> 
   <head> 
      <script type = "text/javascript"> 
         function Warn() {  
            alert ("This is a warning message!");  
            document.write ("This is a warning message!");  
         } 
      </script> 
   </head> 

   <body> 
      <p>Click the following button to see the result: </p> 
      <form> 
         <input type = "button" value = "Click Me" onclick = "Warn();" /> 
      </form> 
   </body> 
</html>

Следующий вывод отображается при успешном выполнении вышеуказанного кода.

Диалоговое окно подтверждения

Диалоговое окно подтверждения в основном используется для получения согласия пользователя на любую опцию. Он отображает диалоговое окно с двумя кнопками: OK и Отмена.

Если пользователь нажимает кнопку «ОК», метод подтверждения окна () вернет значение «истина». Если пользователь нажимает кнопку «Отмена», то метод valid () возвращает false. Вы можете использовать диалоговое окно подтверждения следующим образом.

пример 

<html> 
   <head> 
      <script type = "text/javascript"> 
         function getConfirmation(){  
            var retVal = confirm("Do you want to continue ?");  
            
            if( retVal == true ){  
               document.write ("User wants to continue!");  
               return true;  
            } else {  
               Document.write ("User does not want to continue!");  
               return false;  
            }  
         }  
      </script> 
   </head> 

   <body> 
      <p>Click the following button to see the result: </p> 
      <form> 
         <input type = "button" value = "Click Me" onclick = "getConfirmation();" /> 
      </form> 
   </body> 
</html>

Следующий вывод отображается при успешном выполнении вышеуказанного кода.

Диалоговое окно подсказок

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

Это диалоговое окно отображается с использованием метода prompt (), который принимает два параметра: (i) метку, которую вы хотите отобразить в текстовом поле, и (ii) строку по умолчанию для отображения в текстовом поле.

В этом диалоговом окне есть две кнопки: ОК и Отмена. Если пользователь нажимает кнопку ОК, подсказка метода окна () возвращает введенное значение из текстового поля. Если пользователь нажимает кнопку «Отмена», подсказка метода окна () возвращает ноль.

пример 

<html> 
   <head> 
      <script type = "text/javascript"> 
         function getValue(){  
            var retVal = prompt("Enter your name : ", "your name here");  
            document.write("You have entered : " + retVal);  
         }  
      </script> 
   </head> 

   <body> 
      <p>Click the following button to see the result: </p> 
      <form> 
         <input type = "button" value = "Click Me" onclick = "getValue();" /> 
      </form> 
   </body> 
</html>

Следующий вывод отображается при успешном выполнении вышеуказанного кода.

40
Share: