Computer >> Hướng Dẫn Máy Tính >  >> Lập Trình >> JavaScript

Cách thay đổi nhãn nút bấm trong hộp thoại alert bằng JavaScript

Với hộp thoại alert() chuẩn, bạn không thể thay đổi nhãn nút bấm. Để thay đổi, phải dùng custom alert box. Ví dụ dưới đây đổi nút "OK" thành "Thank you for informing!":

Ví dụ

<!DOCTYPE html>
<html>
  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script>
      function functionAlert(msg, myYes) {
        var confirmBox = $("#confirm");
        confirmBox.find(".message").text(msg);
        confirmBox.find(".yes").unbind().click(function() {
          confirmBox.hide();
        });
        confirmBox.find(".yes").click(myYes);
        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">This is a warning message.</div>
      <button class="yes">Thank you for informing!</button>
    </div>
    <input type="button" value="Click Me" onclick="functionAlert();" />
  </body>
</html>