Ad

JavaScript - Popup Boxes

Popup boxes is use to interact with the user, for example: you can give message, ask for input, or confirmation before performing any action. In JavaScript popup boxes are of 3 kinds: Alert box, Confirm box and Prompt box.

JavaScript - Alert Box

Alert Box is use to give the message in a form of modal box with a OK Button. When Alert box appear, you cannot interact with rest of the page.

Example 1: Alert box! Click on button to invoke alert box. 1

<body>
    <p>Click the button to display an alert box:</p>
    <button onclick="alertBox()">Try it</button>
    <script>
        function alertBox() {
            alert("Hello, I am an Alert box!");
        }
    </script>
</body>

Click the button to display an alert box:

JavaScript - Confirm Box

Confirm box is another type of modal box, which is used to verify or accept something from user.

Example 2: Click on button, to invoke confirm box, it contain default 2 buttons i.e. ok & cancel, by clicking on each button, different message can be displayed. 1

<body>
    <p>Click the button to display a confirm box.</p>
    <button onclick="confirmBox()">Try it</button>
    <p id="confirm_message"></p>
    <script>
        function confirmBox() {
            var x;
            if (confirm("Press a button!") == true) {
                x = "You pressed OK!";
            } else {
                x = "You pressed Cancel!";
            }
            document.getElementById("confirm_message").innerHTML = x;
        }
    </script>
</body>

Click the button to display a confirm box.

JavaScript - Prompt Box

A prompt box is often used if you want the user to input a value without occupying the space on a webpage.

Syntax: result = prompt(title, [default]);

Example 3: Prompt box! clicking on button prompt box invoked with a message 'Please enter your name' with a default name, on clicking ok button, it will display greet message with the name entered by user. 1

<body>
    <p>Click the button to display a prompt box.</p>
    <button onclick="promptBox()">Try it</button>
    <p id="p1"></p>
    <script>
        function promptBox() {
            var x = prompt("Please enter your name", "Javascript");
            if (x != null) {
                document.getElementById("p1").innerHTML = "Hello " + x + "! How are you?";
            }
        }
    </script>
</body>

Click the button to display a prompt box.

Example - JavaScript Popup Box

Example 4: JavaScript popup boxes - alert, confirm, prompt box. 1

<body>
    <h1>Popup Box Example</h1>
    <button type="button" onclick="funAlert()">Alert</button>
    <button type="button" onclick="funConfirm()">Confirm</button>
    <button type="button" onclick="funPrompt()">Prompt</button>
    <script>
        function funAlert() {
            alert("Hi, i m alert box");
        }
        function funConfirm() {
            if(confirm("Are you sure! Want to change background color")) {
                document.body.style.background = "green";
            }
            else {
                document.body.style.background = "grey";
            }
        }
        function funPrompt() {
            var a = prompt("Enter color name");
            document.body.style.background = a;
            document.getElementsByTagName("h1")[0].style.color = a;
            document.getElementsByTagName("h1")[0].style.background = "white";
        }
    </script>
</body>

JavaScript Feedback, Questions, Suggestions, Discussion.