如何使用 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+ 浏览量

启动您的职业生涯

完成课程获得认证

开始学习
广告