|
Answer» Yes, it is possible to CREATE a custom alert box with CSS and JavaScript library jQuery.
Let us see an example wherein we have styled the alert box, it’s button, background color, border, position, etc. <!DOCTYPE html>
<html>
<head>
<script SRC="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
<script>
FUNCTION myAlertBox(msg, myYes) {
var box = $("#test");
box.find(".msg").text(msg);
box.find(".yes").unbind().click(function() {
box.hide();
});
box.find(".yes").click(myYes);
box.show();
}
</script>
<style>
#test {
display: none;
background-color: blue;
border: 2px SOLID #aaa;
color: white;
position: fixed;
width: 250px;
height: 80px;
left: 50%;
margin-left: -80px;
margin-top: 50px;
padding: 10px 10px 10px;
box-sizing: border-box;
text-align: center;
}
#test button {
background-color: white;
display: inline-block;
border-radius: 5px;
border: 1px solid #aaa;
padding: 5px;
text-align: center;
width: 80px;
cursor: pointer;
}
#confirm .msg {
text-align: left;
}
</style>
</head>
<body>
<div id = "test">
<div class = "MESSAGE">Welcome to the website!</div>
<button class ="yes">OK</button>
</div>
<h2>Fancy Alert Box</h2>
<input type = "button" value = "Display" onclick = "myAlertBox();" />
</body>
</html>The output displays the button which is to be clicked to generate the new custom alert box; On clicking the above “Display” button, the following alert is visible which we styled:
|
