All TalkersCode Topics

Follow TalkersCode On Social Media

devloprr.com - A Social Media Network for developers Join Now ➔

How To Change Background Color Of Alert Box In JavaScript

Last Updated : Mar 11, 2024

How To Change Background Color Of Alert Box In JavaScript

In this tutorial we will show you the solution of how to change background color of alert box in JavaScript, one thing to note here that we can’t customize our alert box created with JavaScript because in JavaScript there is no any way to apply CSS.

So, we hope that jQuery may help you in this task. jQuery is just like JavaScript, it is a library of JavaScript and allows user to apply CSS. Let us understand this article now with help of jQuery.

Step By Step Guide On How To Change Background Color Of Alert Box In JavaScript :-

As, there are many ways to change background color of alert box.

There is already an article on how to customize alert box using JavaScript, if you want to customize full alert box then you must visit to our that article.

Today, let us see our this article now.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>home page</title>
 <script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js">
 </script>
 <script>
  function member(msg,clk) {
   var confirmBox = $("#container");
   confirmBox.find(".msg").text(msg);
   confirmBox.find(".yes").unbind().click(function()
   {
   confirmBox.hide();
   });
   confirmBox.find(".yes").click(clk);
   confirmBox.show();
  }
 </script>
 <style>
  body {
   margin : 0;
   text-align: center;
  }
  h1 {
   color: black;
  }
  #container {
   display: none;
   background-color: black;
   color: white;
   position: absolute;
   width: 350px;
   border-radius: 5px;
   left: 50%;
   margin-left: -160px;
   padding: 16px 8px 8px;
   box-sizing: border-box;
  }
  #container button {
   background-color: yellow;
   display: inline-block;
   border-radius: 5px;
   border: 2px solid gray;
   padding: 5px;
   text-align: center;
   width: 60px;
  }
  #container .msg {
   text-align: left;
   padding: 10px 30px;
  }
 </style>
</head>
<body>
 <h1>Welcome to Talkers code </h1>
 <b>customize JavaScript alert box with css</b>
 <br><br>
 <div id="container">
  <div class="msg">
   Welcome<br> is you want to become a member of our family </div>
  <button class="yes">Deal done</button>
 </div>
 <input type="button" value="Join us" onclick="member();" />
</body>
</html>
  1. First, we write <! DOCTYPE html> which we used as an instruction to the web browser about what version of HTML file is written in.
  2. Secondly, the <html> tag is used to indicate the beginning of an HTML document.
  3. As above now <head> tag is used to contain information about web page. In this tag a <title> tag is used which helps us to specify a webpage title. Both <head> and <title> tags are Paired tags. So, both have </head> and </title> ending tags respectively.
  4. Here, then we create a body tag. All the content which we want to show on browser’s screen or display is always written inside this codes.
  5. Here, in the code above we do nothing, just create an alert box, and type some text in this and create a button also. After that we use display none and apply some css on it to give it a creative look whereas display none is used to hide our alert box.
  6. After that we use jQuery in which we say when you click on button, function gets called and inside function we get the value from alert box and when user click on the button created inside alert box the alert box disappears. We hope that you understand this code easily.
  7. At last, the <body> and <html> tags are closed with </body> and </html> respectively.

Conclusion :-

At last in conclusion, here we can say that with help of this article we are able to change background color of alert box using div.

I hope this tutorial on how to change background color of alert box in JavaScript helps you and the steps and method mentioned above are easy to follow and implement.