How to change the style of alert box using CSS ?

An alert box is an important feature of JavaScript. It is used to inform the client or the user about the click events. Like if the user subscribes to your page for daily updates then you can wish them back, or thanks them by showing an alert box message. Sometimes developers like us do not want to just show a normal text inside of the alert box we want to decorate that box in our own way. But the JavaScript alert box is a system object not the subject of CSS. To design the alert box we need jQuery then by using the only CSS we can do that. In this article, we will design the alert box.

Normal alert box design:

Below example illustrate the complete approach:
Example 1: Double button alert dialog box design. In this example we will create a double button, one will be for confirmation and another one will be for Unsubscription. We will assign a class of the alert box, after that, we design that specific class in CSS. In this example, the class is a container. To design the button we will use the button tag in the CSS to design it. And the appeared messages also can be decorated like we attach a class and can design that too. The class and id can call for the design and events.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
<head>
    <script src=
    </script>
    <script>
        function geeks(msg, gfg) {
            var confirmBox = $("#container");
              
            /* Trace message to display */
            confirmBox.find(".message").text(msg);
              
            /* Calling function */
            confirmBox.find(".yes").unbind().click(function() 
            {
            confirmBox.hide();
            });
            confirmBox.find(".yes").click(gfg);
            confirmBox.show();
              
            confirmBox.find(".no").unbind().click(function() 
            {
            confirmBox.hide();
            });
            confirmBox.find(".no").click(gfg);
            confirmBox.show();
        }
    </script>
    <style>
      
        /* Body alignment */     
        body {
            text-align: center;
        }
          
        /* Color for h1 tag */
        h1 {
            color: green;
        }
          
        /* Designing dialog box */
        #container {
            display: none;
            background-image: linear-gradient(to right, #66a80f, #c0eb75);
            background-size:cover;
            color: white;
            position: absolute;
            width: 350px;
            border-radius: 5px;
            left: 50%;
            margin-left: -160px;
            padding: 16px 8px 8px;
            box-sizing: border-box;
        }
          
        /* Designing dialog box's okay buttun */
        #container .yes {
            background-color: #5c940d;
            display: inline-block;
            border-radius: 5px;
            border: 2px solid gray;
            padding: 5px;
            margin-right: 10px;
            text-align: center;
            width: 60px;
            float: right;
        }
          
        #container .no {
            background-color: #22b8cf;
            display: inline-block;
            border-radius: 5px;
            border: 2px solid gray;
            padding: 5px;
            margin-right: 10px;
            text-align: center;
            width: 95px;
            float: right;
        }
          
        #container .yes:hover {
            background-color: #82c91e;
  
        }
          
        #container .no:hover {
            background-color: #99e9f2;
  
        }
          
        /* Dialog box message decorating */
        #container .message {
            text-align: left;
            padding: 10px 30px;
        }
    </style>
</head>
<body>
    <h1>GeeksforGeeks</h1>
    <b>Designing the alert box</b>
    <br><br>
    <div id="container">
        <div class="message">
            Thanks for Subscription<br>A Computer 
            Science Portal for Geeks</div>
        <button class="yes">okay</button>
        <button class="no">Unsubscribe</button>
    </div>
    <input type="button" value="Subscribe" onclick="geeks();" />
</body>
</html>                    

chevron_right


Output:

Example 2: Single-button dialog box. In this example, we will place a single button for confirmation. In a similar way, We will assign a class of the alert box, after that, we design that specific class in CSS. In this example, the class is a container. To design the button we will use the button tag in the CSS to design it. And the appeared messages also can be decorated like we attach a class and can design that too. The class and id can call for the design and events. Design the background in a solid single color. The button will be assigned a task after click it will vanish.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
   <head>
      <script src=
      </script>
      <script>
         function geeks(msg, gfg) {
            var confirmBox = $("#container");
              
            /* Trace message to display */
            confirmBox.find(".message").text(msg);
              
            /* Calling function */
            confirmBox.find(".yes").unbind().click(function() 
            {
               confirmBox.hide();
            });
            confirmBox.find(".yes").click(gfg);
            confirmBox.show();
         }
      </script>
      <style>
        
        /* Body alignment */      
          body {
            text-align: center;
        }
          
        /* Color for h1 tag */
        h1 {
            color: green;
        }
          
        /* Designing dialog box */
        #container {
            display: none;
            background-color: purple;
            color: white;
            position: absolute;
            width: 350px;
            border-radius: 5px;
            left: 50%;
            margin-left: -160px;
            padding: 16px 8px 8px;
            box-sizing: border-box;
         }
           
         /* Designing dialog box's okay buttun */
         #container button {
            background-color: yellow;
            display: inline-block;
            border-radius: 5px;
            border: 2px solid gray;
            padding: 5px;
            text-align: center;
            width: 60px;
         }
           
         /* Dialog box message decorating */
         #container .message {
            text-align: left;
            padding: 10px 30px;
         }
      </style>
   </head>
   <body>
    <h1>GeeksforGeeks</h1>
    <b>Designing the alert box</b>
    <br><br>
      <div id="container">
         <div class="message">
             Thanks for Subscription<br>A Computer 
             Science Portal for Geeks</div>
         <button class="yes">okay</button>
      </div>
      <input type="button" value="Subscribe" onclick="geeks();" />
   </body>
</html>    

chevron_right


Output:




My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.


Article Tags :

1


Please write to us at contribute@geeksforgeeks.org to report any issue with the above content.