Open In App

How to change the style of alert box using CSS ?

Last Updated : 12 Jun, 2022
Improve
Improve
Like Article
Like
Save
Share
Report

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 thank 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: 

The below examples 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 to 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. 

HTML




<!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 button */
        #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>               


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 to 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 clicking it will vanish. 

HTML




<!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 button */
        #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>


Output: 
 

 

HTML is the foundation of web pages and is used for webpage development by structuring websites and web apps. You can learn HTML from the ground up by following this HTML Tutorial and HTML Examples.

CSS is the foundation of web pages and is used for webpage development by styling websites and web apps. You can learn CSS from the ground up by following this CSS Tutorial and CSS Examples.



Similar Reads

How to Replace a JavaScript Alert Pop Up with a Fancy Alert Box ?
JavaScript alert popups are simple and effective for displaying messages to users, but they lack customization and can be visually unappealing. Below are the approaches to replace a JavaScript alert pop-up with a fancy alert box. Table of Content By overriding the alert functionUsing a SweetAlert LibraryBy overriding the alert functionIn this appro
3 min read
How to Replace a JavaScript Alert Pop up with a fancy Alert Box ?
JavaScript alert popups are an easy and effective way to show users messages, but they are not very customizable and don't always look good. Several methods exists in JavaScript to replace a JavaScript alert pop-up with a fancy alert box which are as follows: Table of Content Using Custom HTML and CSSUsing a SweetAlert LibraryUsing CSS FrameworksUs
3 min read
Difference between alert box and confirmation box in JavaScript
Both the boxes appear as a pop-up or you can call them pop-up box. There are three types of pop-up box, you can have basic knowledge by reading What are the types of Popup box available in JavaScript ? and JavaScript | Dialogue Boxes article. Alert BoxConfirmation BoxPrompt Box All of these popups open a modal window, meaning that the user cannot i
3 min read
Difference between alert box and prompt box in JavaScript
1. Alert box : An alert box is one type of popup boxes in JavaScript which is often used to make sure that information have come through the user. So, the user will have to click "OK" to proceed when an alert box pops up on the window. Syntax : window.alert("message"); Another syntax to use alert box is : alert("message"); 2. Prompt box : It is als
2 min read
How to Change Button Label in Alert Box using JavaScript ?
In JavaScript, the alert method is used to display an alert box with a message. By default, the alert box contains an "OK" button. We cannot directly update the default alert box, However, we can customize the button label by creating a custom alert box using HTML, CSS, and JavaScript. ApproachCreate the UI of the web page using different HTML elem
2 min read
How to Change Button Label in Alert Box using JavaScript?
The alert() function in JavaScript is a useful tool for showing alerts, but it doesn't allow for much customization. One thing that isn't immediately changeable is the button label—which is set to "OK" by default. we will going to discuss some approaches that will help us to change the button label in alert box. These are the following approaches:
2 min read
How to Change the Color of the Alert Box in JavaScript ?
Alert boxes, often utilized in JavaScript applications, provide users with important notifications or messages. However, their default appearance may not always blend seamlessly with the overall design of your website or application. JavaScript offers several methods to customize alert boxes as listed below. Table of Content Using display property
3 min read
How to Change the Color of the Alert Box in JavaScript ?
An alert box is a dialogue box that pops up on the screen to provide information to the user. It contains a message and an OK button, which allow users to acknowledge the message and close the box. Alert boxes are commonly used in web development to display important messages, warnings, or notifications to users. There are several approaches to cha
5 min read
How To Create an Alert Message Box using CSS?
Alert message boxes are commonly used in web development to notify users of important information or actions. In this article, we'll explore how to create visually appealing and unique alert message boxes using CSS. We'll design distinct styles for success, warning, and error alerts, ensuring each box stands out and effectively communicates its mes
2 min read
How to change Input box borders after filling the box using JavaScript ?
In this article, we will change the input border after filling in the text on the input text field. The onchange event attribute works when the value of the element changes and selects the new value from the list. Approach: Whenever the input value is changed with some value by the user, the onchange event attribute is triggered. After the event is
2 min read
Article Tags :