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>




34 views0 comments

Recent Posts

See All

Group Flights Gone are the days when people like to fly all along. As the Standard of living is increasing by leap and bond, people to show their influence or to impression many offers to take on a gr

CSS MCQ Q 1. What is CSS? a. CSS is a style sheet language b. CSS stands for Cascading style sheet. c. CSS is used to style the HTML documents d. All of the mentioned Answer: d Q

HTML MCQ: Q. HTML Full form: a. HighText Machine Language b. HyperText and links Markup Language Hyper Text Marquee Language HyperText Markup Language Answer: d Q. The correct sequence of