How to change the color of the alert box in JavaScript?

Front End Technology Javascript Web Development

In this tutorial, we will learn to change the color of the alert box in JavaScript. Also, we will learn to style the whole alert box, including the content of the alert box.

In JavaScript, the alert box is the best way to show the success, failure, or informative messages to the user, when the user performs some operation on the application. The programmers can create the default alert box using the alert() method, but they can’t change the default style of the alert() box.

To change the style of the alert box, programmers need to create the custom alert box and style it according to requirements.

Create a Custom Alert Box Using JavaScript

To create the custom alert box using pure JavaScript, users can create a div element and add the content of the alert box inside that. Also, they can add the close button and style it according to requirement, and set its position at the bottom right corner of the alert box. Furthermore, programmers can set the custom background color for the alert div.

Programmers just need to change the display property or style of the alert box when they want to popup and hide the alert box.

Syntax

Users can follow the syntax below to convert the custom div to the alert box.

<div id = "alert">
   // content for alert div
</div>
// button to open alert div
<button onclick = 'invokeAlert();'> Show Alert Box </button>
<script>
   var alertDiv = document.getElementById("alert");
   // function to show alert div
   function invokeAlert() {
      alertDiv.style.display = "block";
   }

   // function to close alert div
   function closeDialog() {
      alertDiv.style.display = "none";
   }
</script>

Approach

Created the custom alert box using the div element.
Set the background color for the div element and the font color for the text message.
Properly styled the close button and whole alert box using the CSS in the example.

Example

We have created two functions to show and hide the alert box. When a user clicks on the show alert box button, it will call the invokeAlert() function, which will set ‘dispaly: block’ for the alert div. When the user clicks on the close button inside the alert box, it will invoke the function closeDialog(), which will set the ‘display: none’ for the alert div to hide it.


<html>
<head>
</script>
   <style>
      #alert {
         display: none;
         background-color: rgb(252, 219, 219);
         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: green;
      }
      button {
         border-radius: 12px;
         height: 2rem;
         padding: 7px;
         cursor: pointer;
         border: 2px solid green;
         background-color: aqua;
      }
      #close {
         position: absolute;
         right: 20px;
         bottom: 10px;
      }
   </style>
</head>
<body>
   <h2>Change the color of alert box in Javascript.</h2>
   <h4>Creating custom alert box using <i> vanilla Javascript.</i></h4>
   <div id = "alert">
      <p>Welcome to the tutorialsPoint!</p>
      <button id = "close" onclick = "closeDialog()"> Close</button>
   </div>
   <button onclick = 'invokeAlert();'>Show Alert Box</button>
   <script>
      var alertDiv = document.getElementById("alert");
      function invokeAlert() {
         alertDiv.style.display = "block";
      }
      function closeDialog() {
         alertDiv.style.display = "none";
      }
   </script>
</body>
</html>

This tutorial will teach users to create the custom alert box using the pure JavaScript and that’s how users can change the color of the alert div. Also, users can use the JQuery library to customize the color of the alert box.