Welcome to the JavaScript Tutorials, we already covered javascript is a case sensitive, its syntax and how to use JavaScript. Today we will discuss JavaScript Popup box. The JavaScript popup box will let your users see additional information in a very popular open a window way. It will not only show the information, but also it will not steal your visitor.
In fact JavaScript popup box will let you specify the dimensions, and positions of the popup window. In JavaScript we can have three kinds of popup Windows:
- Alert Box – It can be used to alert the user about the information, and user have to click ok button.
- Confirm Box – You can use a confirm box, if you want the user to accept or decline anything. The confirm box comes with two buttons ( ok, cancel).
- Prompt Box – You can use prompt box to get inputs from the visitors.
JavaScript Popup box – Examples
Now we will see the examples of the above said javascript popup box one by one, Examples will let you see the real time use of the popup boxes.
Alert Box – Example
We have used a custom function (mySharpLesson) and the message it will flash is “ alert box For you”.
<html> <head></head> <body> <p><h2>Click the button to see the alert box:</h2></p> <button onclick="mySharpLesson()">Try it</button> <script> function mySharpLesson() { alert("alert box for you"); } </script> </body> </html>
Now let’s see how the result will be shown in the real world:
When you will click the try it button, then you will see the alert box.
Confirm box – Example
Now we will see the use of second JavaScript Popup box, we have used custom function (mySharpLesson) and getElementById() to carry the confirm box till result.
<html> <head></head> <body> <p id="SharpDemo"><h2>Example of Confirmation box</h2></p> <button onclick="mySharpLesson()">Click Me</button> <script> function mySharpLesson() { var x; if (confirm("Ok or Cancel!") == true) { x = "Clicked on OK!"; } else { x = "Clicked on Cancel!"; } document.getElementById("SharpDemo").innerHTML = x; } </script> </body> </html>
When you will click on ‘Click me’ a popup will open, here you can see unlink alert box, it has extra cancel button as well. What ever button you will click, it will show the text of the clicked button.
Prompt Box – Example
Now, unlike alert or confirm box, you will see user inputs in the prompt box, In the below example we just asked the user to input your name and see the name in the final text that will display on a page. Again we have used custom function mySharpLesson(),getElementById (It is a method of the document object, It will return the element of the specified id) and the prompt() function.
<html> <body> <h2>Click to See the prompt box.</h2> <button onclick="mySharpLesson()">Click Me</button> <p id="Sharpdemo"></p> <script> function mySharpLesson() { var person = prompt("Enter Your Name","SharpLesson"); if (person != null) { document.getElementById("Sharpdemo").innerHTML = "Hey " + person + "! Now you know, what is prompt?"; } } </script> </body> </html>
The output will be:
When you will run the code, you will see the ‘click to see the prompt box’ and a button ‘click me’. When you will click the button you will see the popup window, that will ask for your name. Once you will enter the name and hit ok button, then you will see a text message with your name. In the above picture we have just shown you the prompt box, when you will enter the detail, then you will see the final result.
Note: Any function that is not known to you, just click on it to understand the use of that function.
Points To Remember
- Avoid overusing of alert box, because it takes the focus away from the current window. The user can’t access page, Until user will not click the Ok button.
- Stay focused with the overuse of the confirm box, because it will not let users to access content, until they will click ok or cancel button.
- Like alert box and confirm box, avoid overusing the prompt box. A dialog box will let users to give their input and can click ok or cancel button as per their interest.
Conclusion
We have just covered JavaScript popup box and its examples. If you want to learn JavaScript in deep, then don’t forget to practice. Try to use above popups in examples that you can use while practicing.