Java Script Popup Box
top of page

Java Script Popup Box



Popup Box in Java Script

There are three types popup box in java script which are below:

  1. Alert Dialog Box

  2. Confirmation Dialog Box

  3. Prompt Dialog Box

Alert Dialog Box:

Alert box is generally used for giving a warning message to the users. In other words we can say that the alert box can be used for friendlier messages. alert box consists of only one "OK" button to select and proceed.

Program:

<!DOCTYPE html>

<html>

<body>

<h2>Example of Alert Box</h2>

<button onclick="myfun()">Click me</button>

<script>

function myfun()

{

alert("wrong info")

}

</script>

</body>

</html>



Confirmation Dialog Box

The confirmation dialog box is mostly used for taking user approval for any option. It consists a dialog box with two buttons one is "OK" and second is "cancel". If we click on OK button the window method confirm() will return true and if we click on the cancel button then the confirm () return false.

Program:

<!DOCTYPE html>

<html>

<body>

<h2>Example of Confirm Dialog Box</h2>

<button onclick="myfun()">Confirm</button><br><br>

<h4><p id="try"></p></h4>

<script>

function myfun()

{

var txt;

if(confirm("Do you want to continue"))

txt="user want to continue";

else

txt="user do not want to continue;"

document.getElementById("try").innerHTML=txt;

}

</script>

</body>


</html>



Prompt Dialog Box:

It is a useful dialog box for us to pop up a text box to get user input and also enables to interact with user. The user to fill in the field and then click ok . This dialog box is displayed using method called prompt() which takes two parameters.

  1. A label which we want to display in the text box

  2. A default string to display in the text box.

Program:

<!Doctype html>

<html>

<body>

<h1> Prompt Dialog Bog</h1>

<button onclick="myfun">check</button>

<p id="tkd"> </p>

<script>

function myfun()

{

var name;

var=person=prompt("Your Name:", "CareerBodh");

if (person==nul ||person=="")

name="User cancelled the prompt";

else

name="hi" +person+ "How are you";

document.getElementById("tkd").innerHTML=name;

}

</script>

</body>

</html>




52 views0 comments
bottom of page