Post
Ask Question

Popup Boxes In JavaScript: Part 2

Introduction

In this article, you will learn about Popup Boxes in JavaScript. This is the second part of Popup Boxes in JavaScript. 

For reading the first part of Popup Boxes In JavaScript, click here,

Confirmation Box in JavaScript 

A JavaScript confirmation box is the same as an alert box. It is a way to prompt your users to confirm an action explicitly. It supplies the user with a choice; they can either press "Ok" to confirm the popup's message, or they can press "Cancel" and not agree to the popup's request.

Function

function ShowConfirm()  
        {  
            var confrm = confirm("Are you sure you want to do that?");  
            var status = document.getElementById("content");  
            if (confrm == true)  
            {  
                status.innerHTML = "You confirmed, thanks";  
            }  
            else  
            {  
                status.innerHTML = "You cancelled the action";  
            }  
        } 

Prompt Box in JavaScript

A JavaScript prompt box is used to obtain a value from the user. You can use this to prompt a user for their password before continuing with a secure action. A Prompt Box also has "Ok" and "Cancel" buttons. If the user clicks on the "Ok" button, the window method prompt() will return the value from the TextBox entered. If the user clicks the "Cancel" button, the window method prompt() returns null.

Function

function ShowPrompt()  
        {  
            var promptpromptValue = prompt('Enter any value in below', '');  
            if (promptValue != null)  
            {  
                document.getElementById("content").innerHTML = "Prompt Box value ->" + promptValue;  
            }  
            else  
            {  
                document.getElementById("content").innerText = "You cancel Prompt Box";  
            }  
        } 

The following example shows how to display popup boxes in JavaScript.

Complete Program

Confirm_Prompt_PopupDemo.html

<!DOCTYPE html>  
<html xmlns="http://www.w3.org/1999/xhtml">  
<head>  
    <title></title>  
    <script type="text/javascript">  
        function ShowConfirm()  
        {  
            var confrm = confirm("Are you sure you want to do that?");  
            var status = document.getElementById("content");  
            if (confrm == true)  
            {  
                status.innerHTML = "You confirmed, thanks";  
            }  
            else  
            {  
                status.innerHTML = "You cancelled the action";  
            }  
        }  
        function ShowPrompt()  
        {  
            var promptpromptValue = prompt('Enter any value in below', '');  
            if (promptValue != null)  
            {  
                document.getElementById("content").innerHTML = "Prompt Box value ->" + promptValue;  
            }  
            else  
            {  
                document.getElementById("content").innerText = "You cancel Prompt Box";  
            }  
        }  
    </script>  
</head>  
<body>  
    <p>  
        <input id="Button1" type="button" value="Show Confirm Box" onclick="ShowConfirm()" />    
        <input id="Button2" type="button" value="Show Prompt Box" onclick="ShowPrompt()" /></p>  
    <div id="content" style="width: 339px; height: 273px">  
    </div>  
</body>  
</html> 

Output

Animation2.gif

For more information, download the attached sample application.


Similar Articles