Friday, March 13, 2020

Popup boxes in JavaScript

Popup boxes in JavaScript


The pop-up boxes are small GUI frames used to make the user aware, warn or ask something. JavaScript provides three types of popup boxes the Alert box, the Confirm box, and the Prompt box.

The alert box

The alert box is mostly used to provide information(alert message) about something to the user. When we want that user is ensured about some information we can use an Alert box. There is only one option(OK) available with an alert box. The user can click ok and move ahead.

javascript alert

The syntax for the alert box is

window.alert("message");

however, using a window object is not necessary we can directly use alert() method without window object.

<script>
window.alert("are you sure to move ahead???");
</script>


The confirm box

The confirm box is very much similar to the Alert box, but a confirm box is also able to display a cancel button along with the ok button(two options). The ok button will return true and the cancel button will return false upon the click.

Confirm box is mostly used if we want the user to ensure about accepting something. The user may accept or cancel.

javascript confirm


The syntax for confirm box is

window.confirm("message");

<script>
window.confirm("are you sure to move ahead???");
</script>


The prompt box


The prompt box has two options available for the user, like the confirm box ok and cancel, but the user can also provide some input in an input text field in a prompt box. In other words, we can ask for some input from the user using the prompt box.

javascript prompt


The syntax for the prompt box is

window.prompt("Enter your name?","default");

<script>
val=window.prompt("What is your name???","Johny");
</script>


Prompt Box Example


<html>
  <head>
<script>
function testPrompt()
{
      name=window.prompt('Enter your name?','');
      if(name!='')
            {
            document.getElementById('demo').innerHTML='Welcome '+name;
            }
      else
            {
            document.getElementById('demo').innerHTML='Unknown user';
            }
      }
</script>
  </head>
  <body>
    <button onclick="testPrompt()">Click me</button>
    <div id='demo'></div>
  </body>

</html>

Try Yourself