JavaScript 對話方塊

在本教程中，你將學習如何在 JavaScript 中建立對話方塊。

建立對話方塊

在 JavaScript 中，你可以建立對話方塊或彈出視窗以與使用者進行互動。你可以使用它們來通知使用者或在繼續之前接收某種使用者輸入。

你可以建立三種不同型別的對話方塊 - 警報， 確認和 提示框。

這些對話方塊的外觀由作業系統和/或瀏覽器設定決定，無法使用 CSS 進行修改。此外，對話方塊是模態視窗; 當顯示一個對話方塊時，程式碼執行停止，並且只有在它被解除後才恢復。

在下一節中，我們將詳細討論每個對話方塊。

建立警報對話方塊

警告對話方塊是最簡單的對話方塊。它使你可以向使用者顯示短訊息。它還包括 確定 按鈕，使用者必須單擊 確定 按鈕才能繼續。

你可以使用 alert() 方法建立警報對話方塊。你已經在前面的章節中看到過很多警報示例。我們來看一個例子：

var message = "Hi there! Click OK to continue.";
alert(message);
 
/* The following line won't execute until you dismiss previous alert */
alert("This is another alert box.");

建立確認對話方塊

確認對話方塊允許使用者確認或取消操作。確認對話方塊看起來類似於警告對話方塊，但它包含 取消 按鈕和 確定 按鈕。

你可以使用 confirm() 方法建立確認對話方塊。此方法僅返回布林值（true 或 false），具體取決於使用者是單擊 確定 還是 取消 按鈕。這就是為什麼它的結果經常在使用時分配給變數的原因。

以下示例將根據單擊的按鈕在瀏覽器中列印一些文字。

var result = confirm("Are you sure?");
 
if(result) {
    document.write("You clicked OK button!");
} else {
    document.write("You clicked Cancel button!");
}

建立提示對話方塊

提示對話方塊用於提示使用者輸入資訊。提示對話方塊包括文字輸入欄位，確定和取消按鈕。

你可以使用 prompt() 方法建立提示對話方塊。當使用者單擊 確定 按鈕時，此方法將返回在輸入欄位中輸入的文字；如果使用者單擊 取消 按鈕，則返回 null。如果使用者單擊 確定 按鈕而未輸入任何文字，則返回空字串。因此，在使用變數時，通常會將其結果賦值給變數。

以下示例將列印單擊 確定 按鈕時輸入的值。

var name = prompt("What's your name?");
 
if(name.length > 0 && name != "null") {
    document.write("Hi, " + name);
} else {
    document.write("Anonymous!");
}

prompt() 方法返回的值始終為字串。這意味著如果使用者在輸入欄位中輸入 10，則返回字串 10 而不是數字 10。

因此，如果要將返回的值用作數字，則必須將其轉換為數字，如下所示：

var age = Number(prompt("What's your age?"));

提示： 要在對話方塊中顯示換行符，請使用換行符或換行符（\n）; 反斜槓後跟字元 n。