09. JavaScript Popup Boxes

Javascript Popup Boxes

popupboxes
Alert box
confirm box
prompt box

popup boxes
Javascript has three types of popup boxes: alert box,confirm box, and prompt box

Alert box
An alert box is aften used when you want to display information to the user.
When an alert box pops up, the user will have to click OK to proceed

alert("sometext");

<html>
<script type="text/javascript">
function show_alert()
{
alert("Hello! I am an alert box!");
}
</script>
</head>
<body>
<input type="button" onClick="show_alert()" value="show alert box"/>
</body>
</html>

<html>
<head>
<script type="text/javascript">
function disp_alert()
{
alert("Hello again! This is how we " +'\n'+"add line breaks to an alert box!");
}
</script>
</head>
<body>
<input type="button" onClick="disp_alert()" value="Display alert box"/>
</body>
</html>

Confirm Box

A confirm box is often used if you want the user to verify or accept something.
When a confirm box pops up, the user will have to click eithe OK or Cancel to proceed

if the user clicksOK, the box returns true.
if the user clicks Cancel, the box returns false.

confirm("sometext");

<html>
<head>
<script type="text/javascript">
function show_confirm()
{
var r=confirm("press a button!");
if(r==true)
{
alert("you pressed OK!");
}
else
{
alert("you pressed cancel!");
}
}
</script>
</head>
<body>
<input type="button" onClick="show_confirm()" value="show a confirm box"/>
</body>
</html>

Prompt Box

A prompt box is often used if you want the user to input a value while on a page or from a page.
when a prompt box popsup the user will have to click either OK or Cancel to proceed after entering an input value.

If the user clicks OK, the box returns the input value.
if the user clicks Cancel, the box returns the null.

prompt("sometext","defultvalue");

<html>
<head>
<script type="text/javascript">
function disp_prompt()
{
var fname=prompt("please enter your name:","your name")
document.getElementById("msg").innerHTML="Greetings,"+fname
}
</script>
</head>
<body>
<input type="button" onClick="disp_prompt()" value="Display a prompt box"/>
<br/>
<br/>
<div id="msg"></div>
</body>
</html>

No comments:

My Favorite Books

  • C and Data Structures by Ashok N. kamthane
  • Web Technologies by A. A. Puntambekar
  • Learn HTML and CSS with W3Schools
  • Learn JavaScript and Ajax with W3Schools
  • HTML5 Black Book: Covers Css3, Javascript,XML, XHTML, Ajax, PHP And Jquery
  • HTML5 Application Development Fundamentals: MTA Exam 98-375
  • .NET 4.0 Programming 6-In-1, Black Book
  • SQL Server 2008 R2 Black Book
  • Asp.net 4.0 Projects Covers: net 3.5 And .net 4.0 Codes, Black Book
  • UNIX Shell Programming 1 Edition by Yashavant Kanetkar
  • UNIX and Shell Programming 1 Edition by Richard F. Gilberg, Behrouz A. Forouzan
  • Computer Networks by Andrew S. Tanenbaum
  • Multiple Choice questions in computer science by Timothy J Williams