Simple JavaScript alert that you usually call like this alert("Hai!"); may be little bit boring. So here come an idea to create custom alert that you can style it as you wish.
Here is the code and give it a try:
<!DOCTYPE html>
<html>
<head>
<title>Custom JavaScript Alert</title>
<style>
#ca{
position: fixed;
left: 60px;
right: 60px;
bottom: 60px;
padding: 20px;
background-color: red;
color: white;
border-radius: 20px;
text-align: center;
display: none;
}
</style>
</head>
<body>
<div id="ca">Hi There!</div>
<button onclick="simpleAlert()">Alert</button>
<button onclick="customAlert()">Custom Alert</button>
<script>
function simpleAlert(){
alert("Hi there!");
}
function customAlert(){
document.getElementById("ca").style.display = "block";
setTimeout(function(){
document.getElementById("ca").style.display = "none";
}, 1000);
}
</script>
</body>
</html>