Popup Boxes In JavaScript: Part 2

Confirmation Box

 
A JavaScript confirmation box is the same as an alert box. It is a way to prompt your users to explicitly confirm an action. 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
  1. function ShowConfirm()  
  2.         {  
  3.             var confrm = confirm("Are you sure you want to do that?");  
  4.             var status = document.getElementById("content");  
  5.             if (confrm == true)  
  6.             {  
  7.                 status.innerHTML = "You confirmed, thanks";  
  8.             }  
  9.             else  
  10.             {  
  11.                 status.innerHTML = "You cancelled the action";  
  12.             }  
  13.         } 

Prompt Box

 
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 then the window method prompt() will return the value from the TextBox entered by the user. If the user clicks on the "Cancel" button then the window method prompt() returns null.
 
Function
  1. function ShowPrompt()  
  2.         {  
  3.             var promptpromptValue = prompt('Enter any value in below', '');  
  4.             if (promptValue != null)  
  5.             {  
  6.                 document.getElementById("content").innerHTML = "Prompt Box value ->" + promptValue;  
  7.             }  
  8.             else  
  9.             {  
  10.                 document.getElementById("content").innerText = "You cancel Prompt Box";  
  11.             }  
  12.         } 
The following example shows how to display popup boxes in JavaScript.
 
Complete Program
 
Confirm_Prompt_PopupDemo.html
  1. <!DOCTYPE html>  
  2. <html xmlns="http://www.w3.org/1999/xhtml">  
  3. <head>  
  4.     <title></title>  
  5.     <script type="text/javascript">  
  6.         function ShowConfirm()  
  7.         {  
  8.             var confrm = confirm("Are you sure you want to do that?");  
  9.             var status = document.getElementById("content");  
  10.             if (confrm == true)  
  11.             {  
  12.                 status.innerHTML = "You confirmed, thanks";  
  13.             }  
  14.             else  
  15.             {  
  16.                 status.innerHTML = "You cancelled the action";  
  17.             }  
  18.         }  
  19.         function ShowPrompt()  
  20.         {  
  21.             var promptpromptValue = prompt('Enter any value in below', '');  
  22.             if (promptValue != null)  
  23.             {  
  24.                 document.getElementById("content").innerHTML = "Prompt Box value ->" + promptValue;  
  25.             }  
  26.             else  
  27.             {  
  28.                 document.getElementById("content").innerText = "You cancel Prompt Box";  
  29.             }  
  30.         }  
  31.     </script>  
  32. </head>  
  33. <body>  
  34.     <p>  
  35.         <input id="Button1" type="button" value="Show Confirm Box" onclick="ShowConfirm()" />    
  36.         <input id="Button2" type="button" value="Show Prompt Box" onclick="ShowPrompt()" /></p>  
  37.     <div id="content" style="width: 339px; height: 273px">  
  38.     </div>  
  39. </body>  
  40. </html> 
Output
 
Animation2.gif
 
For more information, download the attached sample application.