JavaScript का उपयोग करके कस्टम अलर्ट बॉक्स कैसे डिज़ाइन करें?

कस्टम अलर्ट बॉक्स

कस्टम अलर्ट बॉक्स डिज़ाइन करने के लिए, निम्नलिखित कोड चलाने का प्रयास करें। यह कोड स्टैंडर्ड अलर्ट बॉक्स से अलग एक अलर्ट बॉक्स बनाने के लिए 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 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>