.jpg)
在這篇簡(jiǎn)短的文章中，我們將討論如何使用 JavaScript 顯示確認(rèn)對(duì)話框。確認(rèn)對(duì)話框允許您根據(jù)用戶輸入執(zhí)行操作。
JavaScript 是網(wǎng)絡(luò)的核心技術(shù)之一。大多數(shù)網(wǎng)站都使用它，并且所有現(xiàn)代網(wǎng)絡(luò)瀏覽器都支持它，而不需要插件。在 Envato Tuts+，我們正在討論可以幫助您進(jìn)行日常 JavaScript 開發(fā)的提示和技巧。
作為一名 JavaScript 開發(fā)人員，您經(jīng)常需要以是或否問題的形式獲取用戶輸入，并基于此執(zhí)行某些操作。具體來說，有些操作是敏感且無(wú)法撤消的，您希望向用戶發(fā)出警告或確認(rèn)他們是否確實(shí)打算執(zhí)行該操作，以免他們誤操作。例如，如果有一個(gè)刪除鏈接允許您從數(shù)據(jù)庫(kù)中刪除一個(gè)實(shí)體，您需要與用戶確認(rèn)他們是否確實(shí)要?jiǎng)h除它。因此，即使用戶錯(cuò)誤地點(diǎn)擊了刪除鏈接，他們至少還有機(jī)會(huì)取消它。
在這篇文章中，我將向您展示兩種在 JavaScript 中確認(rèn)用戶操作的方法：使用 confirm 方法和使用隱藏確認(rèn) div。
立即學(xué)習(xí)“Java免費(fèi)學(xué)習(xí)筆記（深入）”；
confirm?方法的語(yǔ)法
在 JavaScript 中，您可以使用 window 對(duì)象的 confirm 方法來顯示對(duì)話框，并等待用戶確認(rèn)或取消。今天，我們將結(jié)合實(shí)際示例討論它的工作原理。
在本節(jié)中，我們將介紹 window.confirm 方法的語(yǔ)法。
confirm 方法的語(yǔ)法如下所示：
var result = window.confirm(message);
confirm 方法采用單個(gè)字符串參數(shù)，您可以傳遞要在對(duì)話框中顯示的消息。這是一個(gè)可選參數(shù)，但您需要傳遞一條明智的消息，否則將顯示一個(gè)帶有是和否選項(xiàng)的空白對(duì)話框，并且可能對(duì)您的訪問者沒有任何意義。通常，消息采用問題的形式，并向用戶提供兩個(gè)選項(xiàng)供選擇。
在對(duì)話框中，有兩個(gè)按鈕：確定和取消。如果用戶點(diǎn)擊確定按鈕，confirm方法返回true，如果用戶點(diǎn)擊取消按鈕，confirm方法返回false。所以可以通過confirm方法的返回值來了解用戶的選擇。 （如果您希望按鈕顯示不同的內(nèi)容，例如是和否，我將在本文底部向您展示如何操作。）
由于 window 對(duì)象始終是隱式的，也就是說它的屬性和方法始終在作用域內(nèi)，因此您還可以調(diào)用 confirm 方法，如以下代碼片段所示。
var result = confirm(message);
需要注意的是，確認(rèn)對(duì)話框是模態(tài)且同步的。因此，當(dāng)顯示對(duì)話框時(shí)，JavaScript 代碼執(zhí)行就會(huì)停止，而在用戶通過單擊“確定”或“取消”按鈕關(guān)閉對(duì)話框后，JavaScript 代碼會(huì)繼續(xù)執(zhí)行。
這就是 confirm 方法的語(yǔ)法概述。在下一節(jié)中，我們將介紹一個(gè)現(xiàn)實(shí)世界的示例。
confirm 方法的真實(shí)示例
在本節(jié)中，我們將通過一個(gè)實(shí)際示例來演示如何在 JavaScript 中使用 confirm 方法。
看一下下面的示例。
當(dāng)用戶單擊刪除我的個(gè)人資料！按鈕時(shí)，它會(huì)調(diào)用 deleteProfile 函數(shù)。在deleteProfile函數(shù)中，我們調(diào)用了confirm方法，該方法向用戶顯示確認(rèn)對(duì)話框。
最后，如果用戶單擊確認(rèn)對(duì)話框中的確定按鈕，我們將繼續(xù)將用戶重定向到 /deleteProfile.php 頁(yè)面，該頁(yè)面將執(zhí)行刪除操作。另一方面，如果用戶單擊取消按鈕，我們將不會(huì)執(zhí)行任何操作。 JavaScript 執(zhí)行將停止，直到用戶做出選擇并關(guān)閉確認(rèn)對(duì)話框。
這就是如何使用JavaScript中的confirm方法來呈現(xiàn)是或否選擇對(duì)話框。
使用隱藏 Div 確認(rèn)“是”或“否”
使用 confirm 方法來獲取用戶確認(rèn)有一些缺點(diǎn)。一是確認(rèn)對(duì)話框不會(huì)成為您的應(yīng)用或網(wǎng)站 ui 的一部分。它不會(huì)使用您的品牌或配色方案。它也無(wú)法自定義，例如，如果您想說是或否而不是確定和取消。最后，確認(rèn)對(duì)話框是模態(tài)的，因此只要顯示它，用戶就無(wú)法與應(yīng)用界面的任何其他部分進(jìn)行交互。
確認(rèn)是或否的另一種方法是在頁(yè)面上使用隱藏的 div。看一下下面的例子：
在此示例中，我們有一個(gè)隱藏的確認(rèn) div，其 ID 為 confirm。要顯示 div，我們只需將其 hidden 屬性設(shè)置為 true。當(dāng)我們想要顯示確認(rèn)信息時(shí)，我們將 hidden 設(shè)置為 true，并再次將其設(shè)置為 false 以隱藏它。
正如您所看到的，這種確認(rèn)是或否的方法比 window.confirm 方法使我們具有更大的靈活性和定制性。
結(jié)論
今天，我們討論了兩種在 JavaScript 中獲取用戶確認(rèn)的方法。首先我們看最簡(jiǎn)單的方法：window.confirm方法。然而，這并不能創(chuàng)造良好的用戶體驗(yàn)。然后我向您展示了如何使用隱藏的 div 來獲得用戶確認(rèn)，并更好地控制確認(rèn)的外觀和行為。
.png)
