JavaScript - Popup Boxes
Popup boxes is use to interact with the user, for example: you can give message, ask for input, or confirmation before performing any action. In JavaScript popup boxes are of 3 kinds: Alert box, Confirm box and Prompt box.
JavaScript - Alert Box
Alert Box is use to give the message in a form of modal box with a OK Button. When Alert box appear, you cannot interact with rest of the page.
Example 1: Alert box! Click on button to invoke alert box. 1
<body>
<p>Click the button to display an alert box:</p>
<button onclick="alertBox()">Try it</button>
<script>
function alertBox() {
alert("Hello, I am an Alert box!");
}
</script>
</body>Click the button to display an alert box:
JavaScript - Confirm Box
Confirm box is another type of modal box, which is used to verify or accept something from user.
Example 2: Click on button, to invoke confirm box, it contain default 2 buttons i.e. ok & cancel, by clicking on each button, different message can be displayed. 1
<body>
<p>Click the button to display a confirm box.</p>
<button onclick="confirmBox()">Try it</button>
<p id="confirm_message"></p>
<script>
function confirmBox() {
var x;
if (confirm("Press a button!") == true) {
x = "You pressed OK!";
} else {
x = "You pressed Cancel!";
}
document.getElementById("confirm_message").innerHTML = x;
}
</script>
</body>Click the button to display a confirm box.
JavaScript - Prompt Box
A prompt box is often used if you want the user to input a value without occupying the space on a webpage.
Syntax: result = prompt(title, [default]);
Example 3: Prompt box! clicking on button prompt box invoked with a message 'Please enter your name' with a default name, on clicking ok button, it will display greet message with the name entered by user. 1
<body>
<p>Click the button to display a prompt box.</p>
<button onclick="promptBox()">Try it</button>
<p id="p1"></p>
<script>
function promptBox() {
var x = prompt("Please enter your name", "Javascript");
if (x != null) {
document.getElementById("p1").innerHTML = "Hello " + x + "! How are you?";
}
}
</script>
</body>Click the button to display a prompt box.
Example - JavaScript Popup Box
Example 4: JavaScript popup boxes - alert, confirm, prompt box. 1
<body>
<h1>Popup Box Example</h1>
<button type="button" onclick="funAlert()">Alert</button>
<button type="button" onclick="funConfirm()">Confirm</button>
<button type="button" onclick="funPrompt()">Prompt</button>
<script>
function funAlert() {
alert("Hi, i m alert box");
}
function funConfirm() {
if(confirm("Are you sure! Want to change background color")) {
document.body.style.background = "green";
}
else {
document.body.style.background = "grey";
}
}
function funPrompt() {
var a = prompt("Enter color name");
document.body.style.background = a;
document.getElementsByTagName("h1")[0].style.color = a;
document.getElementsByTagName("h1")[0].style.background = "white";
}
</script>
</body>