Sunday, 24 July 2016

JavaScript Popup Boxes

Popup Boxes
It allows us to display message in a window and can also be used to prompt user to enter some input.

There are three type of popup boxes

  • alert box
  • confirm box
  • prompt box
alert box
It is used to display alert message such as some error or message. It contains an OK button, which user has to click to continue with the execution of the code.
Example

<!DOCTYPE html>
<html>
<head>
    <title>javaScript alert box</title>
</head>
<body>
    <h1>JavaScript alert box</h1>
    <script>
        alert("This is alert box");
    </script>
</body>
</html>


confirm box
It is used to display message as well as return true or false value. The confirm box displays a dialog box with two button OK and Cancel. Javascript will be executed on the basis of the choice user takes.
Example

<!DOCTYPE html>
<html>
<head>
    <title>javaScript confirm box</title>
</head>
<body>
    <h1>JavaScript confirm box</h1>
    <script>
        var result = confirm("Please choose the option");
        if (result) {
            document.write("ok button clicked");
        }
        else {
            document.write("cancel button clicked");
        }
    </script>
</body>
</html>
When OK Clicked

When Cancel Clicked


prompt box
It is used to take input from the user. It contains a text box and OK and Cancel buttons. If the user clicks OK button, the input value is returned. Otherwise, the box returns null.
Example
<!DOCTYPE html>
<html>
<head>
    <title>javaScript prompt box</title>
</head>
<body>
    <h1>JavaScript prompt box</h1>
    <h1>Enter your age</h1>
    <script>
        var age = prompt("Please enter your age");
        if (age == null || age == "")
        {
            document.write("Please enter valid age");
        }
        else
        {
            document.write("your age is :" + age);
        }
    </script>
</body>
</html>

If nothing is entered

If data is entered


0 comments:

Post a Comment