Customize JavaScript Alert Box CSS
Last Updated : Mar 11, 2024
IN - JavaScript CSS | Written & Updated By - Riya
In this tutorial we will show you the solution of customize JavaScript alert box CSS, one thing to note here that we can’t customize our alert box created with JavaScript because in JavaScript there is no any option 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.
Step By Step Guide On Customize JavaScript Alert Box CSS :-
As, there are many ways to customize alert box with css. We are able to give you a hint. Rest is upon you that how can you use this hint in your website. let us customize our alert box.
<!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>
- First, we write <! DOCTYPE html> which we used as an instruction to the web browser about what version of HTML file is written in.
- Secondly, the <html> tag is used to indicate the beginning of an HTML document.
- 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.
- 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.
- 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.
- After that we use jQuery in which 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.
- 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 the help of this article we are able to customize our alert box with jQuery, but not with JavaScript.
I hope this tutorial on customize JavaScript alert box CSS helps you and the steps and method mentioned above are easy to follow and implement.
About Riya
