如何使用 JavaScript 更改確認框中的按鈕標籤？

在本教程中，我們將學習如何使用 JavaScript 更改確認框中的按鈕標籤。確認框可用於獲取使用者的確認。例如，當您嘗試從某些網站上的帳戶中刪除某些內容時，它們會顯示一個彈出框，其中包含類似“您確定要刪除……嗎？”的訊息。此外，它還包含“是”和“否”按鈕，這是應用程式從使用者那裡獲取的一種確認。

JavaScript 使用者可以使用`confirm()` 方法建立確認框，該方法包含確認訊息字串、“確定”和“取消”按鈕。如果使用預設確認框，則程式設計師無法更改確認框樣式和按鈕標籤。因此，在本教程中，我們將建立自定義確認框。

使用 JavaScript 建立自定義確認框

程式設計師可以使用 HTML、CSS 和 JavaScript 來建立自定義確認框。我們可以建立一個 div 並向其中新增確認框的內容，包括確認框的按鈕。此外，我們還可以根據我們的需求設定 div 及其內容的樣式。我們可以建立函式，在使用者單擊按鈕時顯示和隱藏確認框。

語法

我們可以遵循以下語法來建立具有不同按鈕標籤的自定義確認框。

<div id = "confirm">
   // add confirmation message here
   // custom buttons
   <div class="close">
      <button onclick = "closeConfirm()"> Yes </button>
      <button onclick = "closeConfirm()"> No </button>
   </div>
</div>
<button onclick = 'showConfirm()''> Show confirm Box </button>
<script>
   var confirmDiv = document.getElementById("confirm");
   
   // function to show confirm box
   function showConfirm() {
      confirmDiv.style.display = "block";
   }
   
   // function to hide confirm box
   function closeConfirm() {
      confirmDiv.style.display = "none";
   }
</script>

示例 1

在下面的示例中，我們建立了自定義 div，其中包含確認訊息和兩個標籤分別為“是”和“否”的按鈕。我們已經設定了確認框的樣式，並將按鈕設定在 div 的右下角。

我們有一個名為“顯示確認框”的按鈕，當用戶單擊該按鈕時，我們將呼叫一個函式，該函式將為確認框設定“display: block”。當用戶單擊確認框中的任何按鈕時，它將呼叫一個函式，該函式將為確認框設定“display: none”以將其隱藏。

但是，程式設計師可以為確認框的按鈕新增不同的功能，而不僅僅是關閉確認框。

<html>
<head>
<style>
   #confirm {
      display: none;
      background-color: rgb(194, 195, 251);
      border: 1px solid green;
      position: fixed;
      height: 80px;
      width: 250px;
      left: 40%;
      top: 2%;
      padding: 6px 8px 8px;
      text-align: center;
   }
   p {
      font-size: 18px;
      color: red;
   }
   button {
      border-radius: 12px;
      height: 2rem;
      padding: 7px 10px;
      cursor: pointer;
      border: 2px solid green;
      background-color: aqua;
      margin: 5px;
   }
   .close {
      display: flex;
      position: absolute;
      right: 20px;
      bottom: 0px;
   }
</style>
</head>
<body>
   <h2> Change the button label in confirm box in JavaScript. </h2>
   <h4> Creating custom confirm box using <i> vanilla JavaScript. </i> </h4>
   <div id="confirm">
      <p> Are you sure to delete .....? </p>
      <div class = "close">
         <button onclick = "closeConfirm()"> Yes </button>
         <button onclick = "closeConfirm()"> No </button>
      </div>
   </div>
   <button onclick='showConfirm()''> Show confirm Box </button>
   <script>
      var confirmDiv = document.getElementById("confirm");
      function showConfirm() {
         confirmDiv.style.display = "block";
      }
      function closeConfirm() {
         confirmDiv.style.display = "none";
      }
   </script>
</body>
</html>

示例 2

使用 jQuery 和 CSS 更改按鈕標籤

在下面的示例中，我們更改了確認框中的按鈕標籤。嘗試執行以下程式碼。該程式碼使用 JavaScript 庫 jQuery 和 CSS 建立一個與標準確認框不同的按鈕標籤的確認框 –

<!DOCTYPE html>
<html>
   <head>
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
      <script>
         function functionConfirm(msg, myYes, myNo) {
            var confirmBox = $("#confirm");
            confirmBox.find(".message").text(msg);
            confirmBox.find(".yes,.no").unbind().click(function() {
               confirmBox.hide();
            });
            confirmBox.find(".yes").click(myYes);
            confirmBox.find(".no").click(myNo);
            confirmBox.show();
         }
      </script>
      <style>
         #confirm {
            display: none;
            background-color: #91FF00;
            border: 1px solid #aaa;
            position: fixed;
            width: 250px;
            left: 50%;
            margin-left: -100px;
            padding: 6px 8px 8px;
            box-sizing: border-box;
            text-align: center;
         }
         #confirm button {
            background-color: #48E5DA;
            display: inline-block;
            border-radius: 5px;
            border: 1px solid #aaa;
            padding: 5px;
            text-align: center;
            width: 100px;
            cursor: pointer;
         }
         #confirm .message {
            text-align: left;
         }
      </style>
   </head>
   <body>
      <div id="confirm">
         <div class="message"></div>
         <button class="yes">Like!</button>
         <button class="no">No, I Like Cricket!</button>
      </div>
      <button onclick = 'functionConfirm("Do you like Football?", function yes()
      {
         alert("Yes")
      }, function no()
      {
         alert("no")
      });'>submit</button>
   </body>
</html>

我們已經學習了透過建立自定義確認框來更改確認框按鈕的標籤。此外，我們還可以使用自定義庫來設定確認框的樣式。現在，我們可以根據確認訊息設定確認框中的按鈕標籤。

更新於：2022年8月2日

13K+ 瀏覽量

啟動您的職業生涯

完成課程獲得認證

開始學習
廣告