top of page

Java Script Popup Box

Writer's picture: Rajesh SinghRajesh Singh



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>




54 views0 comments

Recent Posts

See All

IOT Sensor MCQ

Sensor MCQ for O level Exam: Q1. Which sensor is used in Mobile phones? A.      Capacitive Touch Sensor B.      Temperature Sensor...

IOT Arduino MCQ

Building IOT Applications MCQ: Q1. Which Microcontroller is used in Arduino UNO prototyping board? A.    ATmega328m B.     ATmega328p...

Comments


bottom of page