Javascript - Popup Boxes

Now you all are getting basic knowledge of JavaScript Syntax, how to use and how to embed with Html so let’s be yourself ready to fly with dynamism of JavaScript.

 

When we want something highlighted, prompted or any important thing to say end users then we have to attract his visions on that information. So Popup Boxes popping up that information at end user’s sight.

In JavaScript we can create three kind of popup boxes :

  • Alert Box
  • Confirm Box
  • Prompt Box

 

Alert Box :

 

An alert box is often used if you want to make sure information comes through to the user.

When an alert box pops up, the user will have to click "OK" to proceed.

Syntax:                

alert("Alert Message")                 

Example:

 <html>

<head>

<script language="javascript">

function show_alert()

{

alert("Hi! This is vIsIoNs DeVeLoPeR!!")

}

</script>

</head>

<body>

<input type="button" on click="show alert()" value="Show alert box" >

</body>

</html>

 

In above example when user click on button one function called that we see deeply in near future tutorials. That Show Alert() function give alert box with content.

 

 If we want more than one line in alert box then use ‘\n’

alert("Hi! This is vIsIoNs DeVeLoPeR!!" + ‘\n’ + “Beyond Imagination Beyond Success!!!”)

 

Confirm Box :

 

A confirm box is often used if you want the user to verify or accept something.

When a confirm box pops up, the user will have to click either "OK" or "Cancel" to proceed.

If the user clicks "OK", the box returns true. If the user clicks "Cancel", the box returns false.

Syntax: 

confirm("Message")                      

Example:

 <html>

<head>

<script language="javascript">

function disp_confirm()

{

var r=confirm("Press a button")

if (r==true)

{

document.write("You pressed OK!")

}

else

{

document.write("You pressed Cancel!")

}

}

</script>

</head>

<body>

<input type="button" on click="disp_confirm()" value="Display a confirm box" />

</body>

</html>

 

In above example when user gets box with ok and cancel when user click on ok then text shown you pressed ok if cancel clicked then you pressed cancel.

 

Prompt Box :

 

A prompt box is often used if you want the user to input a value before entering a page.

When a prompt box pops up, the user will have to click either "OK" or "Cancel" to proceed after entering an input value.

If the user clicks "OK" the box returns the input value. If the user clicks "Cancel” the box returns null.

Syntax:  

prompt("sometext","defaultvalue")

Example:

 <html>

<head>

<script language="javascript">

function disp_prompt()

{

var c=prompt("Please enter 1st Rank IT Company","Visions Developer")

if (c!=null && c!="")

{

document.write("Hello " + c + "! Is best IT company in world.")

}

}</script>

</head>

<body>

<input type="button" onclick="disp_prompt()" value="Display a prompt box">

</body>

</html>

After clicking button this asked to enter value from user but also it’s come with default value which is Visions Developer.

And after getting proper input from user print that value as given in function.