Компьютерапия

JavaScript - диалоговые окна

Категория: JavaScript
Просмотров: 8223

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, метод window confirm() возвращает true. Если пользователь нажимает кнопку «Отмена», то confirm() возвращает 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) строку по умолчанию, отображаемую в текстовом поле.

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

пример

В следующем примере показано, как использовать диалоговое окно приглашения -

<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>



Понравилась статья? Поделитесь ею с друзьями и напишите отзыв в комментариях!

Новые статьи

Предыдущие статьи

We use cookies on our website. Some of them are essential for the operation of the site, while others help us to improve this site and the user experience (tracking cookies). You can decide for yourself whether you want to allow cookies or not. Please note that if you reject them, you may not be able to use all the functionalities of the site.

Ok