JavaScript: How To Display A Pop Up Box

Using javascript, we can display a message box or pop up in a new window, there is three type of pop up, alert, confirm, and prompt.
example:

The Alert Box Code

<script type="text/javascript">
{
alert("I am an alert box!");
}
</script>
 

The Confirm Box Code

<script type="text/javascript">
{
confirm("Press a button!");
}
</script>

The Prompt Box Code

<script type="text/javascript">
{
prompt("Please enter your name","John Doe");
}
</script>
putting this code will alert visitor every time the page is load. We should add function, function is like giving a name to your code.
example: function function_name(variable)

<script type="text/javascript">
function show_alert()
{
alert("Hello! I am an alert box!");
}
</script>

To call up function we can use input, button or anchor tag.
Input tag with button type example:

<input type="button" onclick="show_alert()" value="Show alert box" />

and the result:


try changing input type to radio, checkbox, or file.

For anchor tag;

<a onclick="javascript: show_alert()" value="show alert box">Show alert box</a>
example anchor text: Show alert box

And lastly button;

<button type="button" onclick="show_alert()">Show Alert Box!</button>

Combining The Message box

This is example how to use multiple pop up box in a single script
The code:
<script type="text/javascript">
function combine()
{
var name=prompt("Please enter your name","John Doe");
if (name!=null && name!="")
{
confirm("Hello " + name + "! How are you today?");
}
alert("thanks for your visit")
}
</script>

call the function

<input type="button" onclick="combine()" value="Click ME!"/>

Combining so many box will make never-ending pop up, that's a bad practise for website.

Pop up box are less popular now because of overuse in the past, internet browser offer pop up blocker to prevent dialog box, but there is many javascript framework can make pop up box with browser friendly and offer beautiful user interface.