Javascript 简明教程

JavaScript - Dialog Boxes

JavaScript 支持三种重要的对话框类型。这些对话框可用于发出警告或确认任何输入，或获取用户的一种输入。这里我们将一一讨论每个对话框。

JavaScript supports three important types of dialog boxes. These dialog boxes can be used to raise and alert, or to get confirmation on any input or to have a kind of input from the users. Here we will discuss each dialog box one by one.

Alert Dialog Box

警报对话框主要用于向用户发出警告信息。例如，如果一个输入字段需要输入文本，但用户未提供任何输入，那么作为验证的一部分，你可以使用一个警报框来发出警告信息。

An alert dialog box is mostly used to give a warning message to the users. For example, if one input field requires to enter some text but the user does not provide any input, then as a part of validation, you can use an alert box to give a warning message.

此外，警报框可用于更友好的信息。警报框仅提供一个按钮“确定”供用户选择并继续。

Nonetheless, an alert box can still be used for friendlier messages. Alert box gives only one button "OK" to select and proceed.

Example

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

Confirmation Dialog Box

确认对话框主要用于获取用户的同意选项。它显示一个带有两个按钮的对话框： OK 和 Cancel 。

A confirmation dialog box is mostly used to take user’s consent on any option. It displays a dialog box with two buttons: OK and Cancel.

如果用户单击确定按钮，则窗口方法 confirm() 将返回 true。如果用户单击取消按钮，则 confirm() 将返回 false。你可以如下使用确认对话框。

If the user clicks on the OK button, the window method confirm() will return true. If the user clicks on the Cancel button, then confirm() returns false. You can use a confirmation dialog box as follows.

Example

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

当你想要弹出文本框以获取用户输入时，提示对话框非常有用。因此，它使你能够与用户进行交互。用户需要填写该字段，然后单击确定。

The prompt dialog box is very useful when you want to pop-up a text box to get user input. Thus, it enables you to interact with the user. The user needs to fill in the field and then click OK.

使用一个名为 prompt() 的方法显示此对话框，该方法采用两个参数：(i) 想在文本框中显示的标签和 (ii) 想在文本框中显示的默认字符串。

This dialog box is displayed using a method called prompt() which takes two parameters: (i) a label which you want to display in the text box and (ii) a default string to display in the text box.

此对话框有两个按钮： OK 和 Cancel 。如果用户单击确定按钮，则窗口方法 prompt() 将返回从文本框输入的值。如果用户单击取消按钮，则窗口方法 prompt() 将返回 null 。

This dialog box has two buttons: OK and Cancel. If the user clicks the OK button, the window method prompt() will return the entered value from the text box. If the user clicks the Cancel button, the window method prompt() returns null.

Example

以下示例展示如何使用提示对话框 −

The following example shows how to use a prompt dialog box −

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