Javascript Dialog Boxes

Many times you experience Javascript dialog boxes while visiting websites. Sometimes dialog box may used to display warning message, for confirmation message and to get user information with "Ok", "Ok" and "Cancel" button.

The three types of dialog boxes available are:

  • Alert dialog box
  • Confirmation dialog box
  • Prompt dialog box

Some other dialog boxes available are

  • Print dialog
  • Find dialog

Alert Dialog Box

It is used to show a message in the dialog box, and there is an OK button. It is mostly used to prompt message if user missed input value or invalid data in given form or text. It is supported by all major browsers.

Example

<html>
<head>
<title>Javascript Alert Dialog Box Example</title>
</head>
<body>
<form name="myform">
<input type="button" value="Alert Dialog Try It" 
onClick="alert('Hello from TechStrikers!')"/>
</form>
</body>
</html>
Try Now

Confirm Dialog Box

It is used to show a message box with "Ok" and "Cancel" button. It is mostly used to take user confirmation on any option. Confirm displays a dialog box with two buttons: OK and Cancel. If the user clicks on OK the window method confirm() will return true. If the user clicks on the Cancel button confirm() returns false.

Example

<html>
<head>
<title>Javascript Confirm Dialog Box Example</title>
<SCRIPT LANGUAGE="JavaScript">
function respConfirm () {
     var response = confirm('Please confirm, you want to continue?');
     if (response) alert("Your response was OK!");
     else alert("Your response was Cancel!");
}
</SCRIPT>
</head>
<body>
<form name="myform">
<input type=button value="Confirm Dialog Try It" 
onClick="respConfirm();"/>
</form>
</body>
</html>
Try Now

Prompt Dialog Box

The prompt dialog box are most commonly used to allow user to inter information. It takes two parameters; a message which you want to display in the text box and default string for the text entry field. Prompt dialog box has two buttons: OK and Cancel. If the user types something and then clicks OK or presses Enter, the prompt method returns the user input string. If the user clicks OK or presses Enter without typing anything into the prompt dialog, the method returns the suggested input, as specified in the second argument passed to prompt. If the user dismisses the dialog (e.g. by clicking Cancel or pressing Esc), then in most browsers the prompt method returns null.

Example

<html>
<head>
<title>Javascript Prompt Dialog Box Example</title>
<SCRIPT LANGUAGE="JavaScript">
function respPrompt() {
     var siteName = prompt('What is your web site name?', 'www.TechStrikers.com');
     if (favorite) alert("Your web site name is: " +  siteName);
     else alert("You pressed Cancel or no value was entered!");
}
</SCRIPT>
</head>
<body>
<form name="myform">
<input type=button value="Prompt Dailog Try It" 
onClick="respConfirm();"/>
</form>
</body>
</html>
Try Now

Print Dialog Box

Javascript allow you to open print dialog box using window.print() method to print your web page. However, the users has option to print out everything on the web page, including the output of JavaScript programs, by using the File -> Print menu of the browser window(e.g. Ctrl+P on Windows systems).

Example

<html>
<head>
<title>Javascript Print Dialog Box Example</title>
</head>
<body>
<form name="myform">
<input type=button value="Print Dailog Try It" 
onClick="window.print();"/>
</form>
</body>
</html>
Try Now

Find Dialog Box

Find dialog not supported by all the browsers. Firefox and some Gecko browsers, you can display the browser's Find dialog by calling window.find('search text',0,0,0,0,0,1) with the last (seventh) parameter true or 1. In Netscape Navigator and Firefox, you can also use the window.find() method without parameters.

Example

<html>
<head>
<title>Javascript Find Dialog Box Example</title>
</head>
<body>
<form name="myform">
<input type=button value="Find Dialog Without Parameter"
onclick="if(window.find)window.find();
else 
alert('Your browser does not support \'window.find()\'!')"/>

<input type=button value="Find Dialog With Parameter"
onclick="if(window.find) window.find('Search Text',0,0,0,0,0,1);
else 
alert('Your browser does not support \'window.find()\'!')"/>

</form>
</body>
</html>
Try Now

See Also

Javascript Built in String Object
Javascript Built in Number Object
Javascript Built in Math Object
Javascript Built in Date Object
Javascript Built in Arrays Object
Javascript Built in Boolean Object
Javascript Built in RegExp Object
Javascript Built in JSON Object


 
SHARE THIS IF YOU LIKE!
submit to reddit
SUBSCRIBE FOR LATEST UPDATES
HAVE WE CONNECTED ON FACEBOOK?
TOP TUTORIALSTOP CODE EXAMPLESTOP LIVE DEMOLINKSSTAY CONNECTED
HTML Tutorial
HTML5 Tutorial
Bootstrap3 Tutorial
Javascript Tutorial
TypeScript Tutorial
AngularJS Tutorial
CSharp Tutorial
PHP Tutorial
Developer Tools
Javascript
AngularJS
Google MAP API V3
ASP.NET
Javascript
AngularJS
Google MAP API V3
Contact Us
Advertise with Us
Privacy Policy
Disclaimer
Stay connected. We actually like you. If you want to get up to the minute updates, then connect with us on your fav below.
 
Twitter   Linkedin   Facebook   Google+    RSS   Pinterest
 
Protected by Copyscape Original Content Checker
 
 
Copyright ©2017 www.techstrikers.com Unauthorized reproduction/replication of any part of this site is prohibited.