วิธีออกแบบ Custom Alert Box ด้วย JavaScript

สร้าง Custom Alert Box ด้วย jQuery และ CSS ต่างจาก Alert มาตรฐาน

ตัวอย่าง

<!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>