What are the different types of pop-up boxes available in JavaScript

+1 vote
I want to know how many pop-up boxes are available in javascript and can you please explain it?
Jan 22, 2020 in Web Development by kartik
• 37,520 points
1,591 views

1 answer to this question.

+1 vote

There are  basically three types of pop-up boxes in javascript :

  1. Alert –>> it just displays a message with an OK button.
        <!DOCTYPE html>

        <html>

       <body>

       <p>Click the button to display an alert box.</p>

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

     <script>
    function myFunction() {
           alert("Hello! Welcome to edureka!");
       }
   </script>

      </body>
     </html>

    2 .Confirm –>> it pops up a confirmation message window with OK and Cancel button.

              

<!DOCTYPE html>
<html>
<body>

<p>Click the button to display a confirm box.</p>

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

<script>
function myFunction() {
  confirm("Press a button!");
}
</script>

</body>
</html>

3.Prompt –>> it pops up a dialog box asking user input followed confirmation buttons.

<!DOCTYPE html>
<html>
<body>

<p>Click the button to demonstrate the prompt box.</p>

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

<p id="demo"></p>

<script>
function myFunction() {
  var person = prompt("Please enter your name", "Edureka");
  if (person != null) {
    document.getElementById("demo").innerHTML =
    "Hello " + person + "! How are you today?";
  }
}
</script>

</body>
</html>
answered Jan 22, 2020 by Niroj
• 82,840 points

Related Questions In Web Development

0 votes
1 answer

What does cors means in Angularjs and what the use of it?

CORS is Cross Origin Resource Sharing which means you ...READ MORE

answered Jan 29, 2020 in Web Development by kartik
• 37,520 points
4,301 views
0 votes
1 answer

What is the use of display: none; in CSS?

In CSS, the display property determines how ...READ MORE

answered Oct 28 in Web Development by kavya
77 views
0 votes
1 answer

What is the purpose of z-index in CSS?

The z-index CSS property sets the z-order of a positioned element and ...READ MORE

answered Oct 29 in Web Development by kavya
47 views
+1 vote
1 answer

What are pseudo class in css??

Hey, The state of an element is controlled  by ...READ MORE

answered Jan 20, 2020 in Web Development by Niroj
• 82,840 points

edited Jan 21, 2020 by Niroj 906 views
+1 vote
1 answer

What is the relationship between angularjs Scope with controller/view?

Let us consider the below block: <div ng-controller="emp"> ...READ MORE

answered Jan 20, 2020 in Web Development by Niroj
• 82,840 points

edited Jan 21, 2020 by Niroj 1,144 views
+1 vote
1 answer

What is css box module?

Hey, All the element present in html follows ...READ MORE

answered Jan 20, 2020 in Web Development by Niroj
• 82,840 points

edited Jan 21, 2020 by Niroj 1,206 views
0 votes
3 answers

Explain the difference between visibility:hidden; and display:none?

display:none means that the tag in question will ...READ MORE

answered Dec 14, 2020 in Web Development by Gitika
• 65,770 points
119,702 views
+1 vote
1 answer

How to access the Angularjs scope of a particular html element from our console?

Hello, You should follow the below steps:-- 1.Compile and ...READ MORE

answered Jan 21, 2020 in Web Development by Niroj
• 82,840 points

edited Jan 21, 2020 by Niroj 2,971 views
+2 votes
1 answer

What are the different ways of using angularjs scope?

Hey!! basically there the three ways of using ...READ MORE

answered Jan 21, 2020 in Web Development by Niroj
• 82,840 points
696 views
webinar REGISTER FOR FREE WEBINAR X
REGISTER NOW
webinar_success Thank you for registering Join Edureka Meetup community for 100+ Free Webinars each month JOIN MEETUP GROUP