Cách thiết kế custom alert box bằng JavaScript

Để thiết kế custom alert box, chạy code sau. Code dùng thư viện jQuery và CSS tạo alert box khác biệt so với alert chuẩn:

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: 80px; 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">OK</button>
    </div>
    <input type="button" value="Click Me" onclick="functionAlert();" />
  </body>
</html>

Hiện đại hơn: Dùng SweetAlert2, Bootstrap Modal, hoặc <dialog> element (HTML5.2) thay vì tự viết/jQuery.