Thursday 28 February 2013

JavaScript alert - prompt - confirm Dialog Boxes


JavaScript alert - Dialog box

Description

alert() is a simple function to display a message to a dialog box (also called alert box). Here is a simple example to display a text in the alert box.

Code

view plainprint?
  1. <!DOCTYPE html>  
  2. <html lang="en">  
  3. <head>  
  4. <meta charset=utf-8>  
  5. <title>Javascript alert box example-1</title>  
  6. </head>  
  7. <body>  
  8. <h1 style="color: red">JavaScript alert() box example</h1>  
  9. <hr />  
  10. <script type="text/javascript">  
  11. alert("This is a alert box");   
  12. </script>  
  13. </body>  
  14. </html>  
Let's puts some variables in the alert box.

Code

view plainprint?
  1. <!DOCTYPE html>  
  2. <html lang="en">  
  3. <head>  
  4. <meta charset=utf-8>  
  5. <title>JavaScript alert box example-2</title>  
  6. </head>  
  7. <body>  
  8. <h1 style="color: red">JavaScript alert() box example</h1>  
  9. <hr />  
  10. <script type="text/javascript">  
  11. mess1='Highest marks in Mathematics : ';  
  12. math=99;  
  13. alert(mess1+math);   
  14. </script>  
  15. </body>  
  16. </html>  

JavaScript prompt - Dialog box

Description

The alert() method can not interact with the visitor. To interact with the user we use prompt(), which asks the visitor to input some information and stores the information in a variable.
See the following web document.

Code

view plainprint?
  1. <!DOCTYPE html>  
  2. <html lang="en">  
  3. <head>  
  4. <meta charset=utf-8>  
  5. <title>JavaScript prompt() example-2</title>  
  6. </head>  
  7. <body>  
  8. <script type="text/javascript">  
  9. visiter_name = prompt("Input your name : ")  
  10. if(visiter_name != null && visiter_name != "")  
  11. alert("Your Name is : "+visiter_name);  
  12. else   
  13. alert("Blank name ...!")  
  14. </script>  
  15. </body>  
  16. </html>  

JavaScript confirm - Dialog box

Description

Confirm() displays a dialog box with two buttons, OK and Cancel and a text as a parameter. If the user clicks on OK button, confirm() returns true and on clicking Cancel button, confirm() returns false.
See the following web document.

Code

view plainprint?
  1. <!DOCTYPE html>  
  2. <html lang="en">  
  3. <head>  
  4. <meta charset=utf-8>  
  5. <title>JavaScript confirm box example </title>  
  6. </head>  
  7. <body>  
  8. <h1 style="color: red">JavaScript confirm() box example</h1>  
  9. <hr />  
  10. <script type="text/javascript">  
  11. mess1='Press Ok to Continue.';  
  12. math=99;  
  13. x = confirm(mess1);   
  14. if (x == true)  
  15. {  
  16. alert("You have clicked on Ok Button.");  
  17. }  
  18. else  
  19. {  
  20. alert("You have clicked on Cancel Button."); }   
  21. </script>  
  22. </body>  
  23. </html>  

Supported Browser

Internet Explorer 7Firefox 3.6Google Chrome 7Safari 5.0.1Opera 10
YesYesYesYesYes
Posted by at

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)