Tutorial on implementing dialog boxes with JavaScript

Tutorial on implementing dialog boxes with JavaScript_Basic knowledge

WBOY

Release： 2016-05-16 15:56:50

Original

2254 people have browsed it

JavaScript supports three important types of dialog boxes. These dialog boxes can be used to raise and alert, or to get confirmation of any input or input from the user.

Here, we’ll look at each dialog box one by one:
Alert dialog:

A warning dialog box is mainly used to give a warning message to the user. Just like if an input field requires some text to be entered, but the user does not enter the field as a validation, you can use an alert box, giving part of the alert message as follows:

<head>
<script type="text/javascript">
<!--
  alert("Warning Message");
//-->
</script>
</head>

Copy after login

However, an alert box can still be used for friendly messages. Alert box, giving only an "Ok" button to select and continue.

Confirmation dialog:

A confirmation dialog is primarily used to give the user's consent to any option. It displays a dialog box with two buttons: OK and Cancel.

If the user clicks the OK button, the window method confirm() will return true. If the user clicks the cancel button confirm() returns false. A confirmation dialog can be used, as shown below:

<head>
<script type="text/javascript">
<!--
  var retVal = confirm("Do you want to continue &#63;");
  if( retVal == true ){
   alert("User wants to continue!");
  return true;
  }else{
   alert("User does not want to continue!");
  return false;
  }
//-->
</script>
</head>

Copy after login

Prompt Dialog Box:

Prompt dialog box is very useful when you want to pop up a text box to get user input. Therefore, it enables you to interact with the user. The user needs to fill in the fields and click OK.

Use dialog box prompt() is a method, it has two parameters (I) to be displayed in the text box (Ⅱ) the default string to display the label displayed in the text box.

This dialog box has two buttons: OK and Cancel. The window method prompt() will return the entered value from the text box if the user clicks the "OK" button. If the user clicks the "Cancel" button, window mode prompt() returns null.

A prompt dialog box can be used, as shown below:

<head>
<script type="text/javascript">
<!--
  var retVal = prompt("Enter your name : ", "your name here");
  alert("You have entered : " + retVal );
//-->
</script>
</head>

Copy after login