Updated April 1, 2023
Introduction to JavaScript Message Box
- JavaScript Message Box is nothing but the alert box which is used to show message along with the Ok button. Those type of message box helps users to distract user from the current window and it forces user to read text or message from the message box.
- Message box helps to show alert messages in various aspects like Danger for showing dangerous action or negative action, Success used to show positive action, Info is used to show action or change where as Warning used to show warning where user want to give attention.
- JavaScript Message box uses built in function which is available in JavaScript for showing popup messages in user window.
How Does Message Box Work in JavaScript?
1. As earlier we have discussed JavaScript Message box used to show pop up messages, also if we want to notify user for specific messages or warning it possible to show. Those dialog boxes are treated as methods of window object
2. Message Boxes in JavaScript can be further divided into three different types as Alert box, Confirm box, Prompt Box. Those are as follows:
Alert Box
JavaScript Alert Message box is one of the display box is used when you want to show or display sure information to the user. The alert box includes OK button so one can press this button to process forward.
Syntax:
window. Alert("text");So in this syntax window. Alert () method is used without window prefix.
Alert box is used to show sure information through pop up window to the user on their browser window. That alert message can be Danger, Success, Warning, Info each is having different meaning as per their importance. Danger value is used to show dangerous or negative action in popup box. Success can be used to show successful and positive action where as Warning value is used to show warning message where need attention of the user. And Info is used to show neutral information regarding change or action. One can create more than one alert message boxes on webpage using script for closing popup boxes using onclick attribute by considering <span> on each element.
Confirm Box
Confirm box is used in JavaScript, whenever there is need to verify or accept by user through popup box. So this type of message box includes two values Ok and Cancel for further process. So if you want to continuing further process, you are going to click Ok means this click returns value true, otherwise you can click Cancel for further process means its returns value false.
Syntax:
window.confirm ("text");Prompt Box
Prompt box is one of the JavaScript Message Box used as an interactive popup window where the user wants to enter input before actual getting access of webpage. Same as Confirm box, its having two values Ok, Cancel .Once user enter Ok button then user need to enter input value to get access of webpage if user clicks cancel then its return null value.
Syntax:
window.prompt("text", "default text")Examples of JavaScript Message Box
Below are the examples of JavaScript Message Box:
Example #1
In the first example we are going to create simple Alert Box on button click , so when user click on button he or she able to see pop up message window and once done, by clicking on Ok button popup window get closed.
Code:
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Simple Alert Box</h2>
<button onclick="myFunction()">Click Here</button>
<script>
function myFunction() {
alert("This is a Example of simple alert box which are used along with JavaScript code, So If you want to highlight something on browser window, so it will take browser attention!");
}
</script>
</body>
</html>Output:
After Clicking on the button
Example #2
In this Example we are going to create Alert Boxes, Those are like Success, Info, Warning, Danger as discussed earlier, Let’s see example for it:
Code:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.alert {
padding: 15px;
background-color: red;
color: black;
margin-bottom: 15px;
}
.alert.success {background-color: green;}
.alert.info {background-color: dodgerblue;}
.alert.warning {background-color: orange;}
.closebutton {
margin-left: 10px;
color:black;
font-weight: bold;
float: right;
line-height: 10px;
cursor: pointer;
}
</style>
</head>
<body>
<h2>JavaScript Alert Messages</h2>
<p>Click on given X symbol to close Alert Message.</p>
<div class="alert success">
<span class="closebutton">×</span>
<strong>Success!</strong> Success used to show positive action
</div>
<div class="alert info">
<span class="closebutton">×</span>
<strong>Info!</strong> Info is used to show action or change.
</div>
<div class="alert warning">
<span class="closebutton">×</span>
<strong>Warning!</strong> Warning used to show warning where user want to give attention.
</div>
<div class="alert">
<span class="closebutton">×</span>
<strong>Danger!</strong> Danger for showing dangerous action or negative action.
</div>
<script>
var close = document.getElementsByClassName("closebutton");
var i;
for (i = 0; i < close.length; i++) {
close[i].onclick = function(){
var div = this.parentElement;
div.style.opacity = "0";
setTimeout(function(){ div.style.display = "none"; }, 400);
}
}
</script>
</body>
</html>Output:
Whenever running this code it will show output like:
So from above Alert boxes we can close those alert boxes by clicking Cross sign given as below:
Example #3
In this example we are going to create Confirm Box.
Code:
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Confirm Box</h2>
<button onclick="myFunction()">Click here to see result</button>
<p id="confirmdemo"></p>
<script>
function myFunction() {
var demo;
if (confirm("Click button to result!")) {
demo = "It's result of button pressed Ok button!";
} else {
demo = "It's result of button pressed Cancel button!";
}
document.getElementById("confirmdemo").innerHTML = demo;
}
</script>
</body>
</html>Output:
Example #4
In this example we are going to create Prompt Box.
Code:
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Prompt Message Box</h2>
<button onclick="myFunction()">Click Here</button>
<p id="pdemo"></p>
<script>
function myFunction() {
var demo;
var city = prompt("Enter Your City:", "Mumbai");
if (city == null || city == "") {
demo = "User denied to enter city in the prompt.";
} else {
demo = "It's Beautiful " + demo + "! Everyone's Dream";
}
document.getElementById("pdemo").innerHTML = demo;
}
</script>
</body>
</html>Output:
Conclusion
- From all over information we came to know that JavaScript Message Box is used to show Popup boxes or modal window which is containing some information to take attention of the user towards dialog boxes.
- All those message boxes further divided into the three types like Alert box, Confirm Box and Prompt Box having value Ok and Cancel, So user can use any one among it as per their choice.
Recommended Articles
This is a guide to JavaScript Message Box. Here we discuss the Introduction to JavaScript Message Box and its Examples along with its Code Implementation. You can also go through our other suggested articles to learn more –
