How to change the style of alert box using CSS ?
Last Updated :
12 Jun, 2022
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.
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...