Free Online Courses for Software Developers - MrBool
× Please, log in to give us a feedback. Click here to login
×

You must be logged to download. Click here to login

×

MrBool is totally free and you can help us to help the Developers Community around the world

Yes, I'd like to help the MrBool and the Developers Community before download

No, I'd like to download without make the donation

×

MrBool is totally free and you can help us to help the Developers Community around the world

Yes, I'd like to help the MrBool and the Developers Community before download

No, I'd like to download without make the donation

Javascript Alert: Introduction to Popup Boxes

In this article I will cover the popup boxes used in JavaScript, the Javascript Alert and explain them using real-time examples.

Introduction:

  • This tutorial will cover popup boxes used in JavaScript along with its functionality. The popup boxes are used to interact with the user with different kind of messages.
  • There are three kinds of popup boxes “Alert Box”, “Confirm Box” and “ Prompt Box” used in JavaScript. This tutorial will deal with working structure of each popup boxes individually.

Alert Box:

  • The JavaScript alert is a dialogue box that appears suddenly with a message on the web page, attracting all the attention of the user towards itself.
  • The alert box can be used, when developers would like to warn the user about something. For example "the following page contains uncomfortable materials not suitable for those under the age of 18. Following script gives the idea of alert box.

Listing 1: Script of Alert Box

<html>
<head>
<script type="text/javascript">
function alertbox(){
			alert("Thanks for choosing MrBool. You are about to navigate to the site.");
			window.location = "http://mrbool.com/";
		}
</script>
</head>
<body>
<input type="button" onclick="alertbox()" value="Alert Button" />
</body>
</html> 
output of alert script which tell the user about further processing

Figure 1: Above figure is an output of alert script which tell the user about further processing.

Prompt Box:

  • When developer wants the user to input a value before entering a specific webpage prompt box is used.In the case of appearance of prompt box, the user will either have to click "OK" to proceed after entering an input value or "Cancel”. When user clicks "OK" the box returns the input value and when he clicks "Cancel" the box returns null. Following script compile the idea of prompt box
  • Listing 2: Script for Prompt Box
    <html>
    <body>
    <head>
    <script type="text/javascript">
    <!--
    function promptbox() {
    		var message = prompt("You seems to be new user, Please enter your full name to use chat group", "Your Name");
    			if(message != null && message != ""){
    				alert("You are welcome:  " + message + "!");
    			}else{
    				alert("Please enter your name to enter in chat group.");
    			}
    }
    //-->
    </script>
    </head>
    <body>
    <input type="button" onclick="promptbox()" value="Prompt Box">
    </body>
    </body>
    </html> 
    
    script of prompt box

    Figure 2: Above output is script of prompt box if user will enter to the page he will have to enter the details what have been asked.

    output is output of prompt box

    Figure 3: Above output is output of prompt box. The first output is asking for username and second one is showing the alert for the same.

    Confirm Box:

    • A confirm box is used when developer wants the user to accept something. When a confirm box display on web page, the user will have to click either "OK” to proceed, "Cancel” if they decide not to proceed.If the user clicks "OK", the box returns true. If the user clicks "Cancel", the box returns false.
    • Sometimes the actions need to be confirmed by the users so as to avoid later blame on the website, hence, confirm boxes are used to. The actions for example, may be to confirm an order submission or a link clicked will take users to another website, require confirmation. Following script will clear the procedure.

    Listing 3: Script of confirmation box

    <html>
    <head>
    <script type="text/javascript">
    <!--
    function confirmationbox() {
    	var Result = confirm("Do you want to go to MrBool.com Website?");
    	if (Result){
    		alert("Welcome to Mrbool.com, Explore the good tutorials.")
    		window.location = "http://mrbool.com/";
    	}else{
    		alert("Thanks for dealing with us. Please visit once Mrbool.com")
    	}
    }
    //-->
    </script>
    </head>
    <body>
    <form>
    <input type="button" onclick="confirmationbox()" value="Confirmation Box">
    </form>
    </body>
    </html> 
    
    the first output ask the user that user wants to navigate to Mrbool site and once user click on “ok” button

    Figure 4: the first output ask the user that user wants to navigate to Mrbool site and once user click on “ok” button.

    outputs are for confirm box

    Figure 5: If user clicks on cancel button, the script thanks the user and asks for visiting the site in future.

    Conclusion:

    Tutorial explained all three types of pop up boxes and I hope the article is useful for you. If you have any query please do comment @mrbool site.



I am having total 7+ years of experience in developing applications using C#, VB.NET, ASP.NET, Silverlight, WCF, SQL Server and Oracle. I am holding a M.Tech degree in Intelligent systems. For more information, visit my Linkedin p...

What did you think of this post?
Services
[Close]
To have full access to this post (or download the associated files) you must have MrBool Credits.

  See the prices for this post in Mr.Bool Credits System below:

Individually – in this case the price for this post is US$ 0,00 (Buy it now)
in this case you will buy only this video by paying the full price with no discount.

Package of 10 credits - in this case the price for this post is US$ 0,00
This subscription is ideal if you want to download few videos. In this plan you will receive a discount of 50% in each video. Subscribe for this package!

Package of 50 credits – in this case the price for this post is US$ 0,00
This subscription is ideal if you want to download several videos. In this plan you will receive a discount of 83% in each video. Subscribe for this package!


> More info about MrBool Credits
[Close]
You must be logged to download.

Click here to login