Alert Boxes

Alert boxes are small popup boxes that are triggered by user events. Here are a few good examples on how to alert your users.

Alert boxes could be used to help users find mistakes, warn them of hazards, or to display a status of events.

1) View Alert Box

Click here to see an alert!

Here is the source code:

<a href=”#” onclick=”alert(‘This is an alert’)”>Click here to see an alert!</a>

You could also use the onclick=”alert(“bla bla”)” or the onChange=”alert(“bla bla”)” inside form elements like buttons and pulldown menus.

2) Other Options:

You can also alert users before they enter your site by placing the “alert” inside the body tag like so:

<body onload=”alert(‘Warning: this site is crazy.’)”>

3) Confirm: Yes or Cancel Alert:

JavaScript provides a function called confirm. This generates an alert box with two buttons, asking “Yes” or “Cancel”. To create this alert we define our own function in the head of a document:

[Start of Code]

<script language=”javascript” type=”text/javascript”>
<!–
function alertURL(url) {
if(confirm(“Are you sure you want to click this link”))
{
location=url
}
}
//–>
</script>

<!– The new function “alertURL()” is called once the link (below) is clicked. Notice that the url address below is located inside the brackets. This is then passed to our function and handled by the javascript “location” statement if the user clicks yes: –>

<a href=”#” onClick=”alertURL(‘fake_page.html’)”>Click Here!</a>

[End of Code]

This could be used to persuade users to stay on the page they are visiting. Or if the link was directed to a server side program that would execute code that was unchangeable (ex: delete a file or update data), this would be a safe guard.

4) Confirm: Form Submissions Yes or No Alert

You can also use it on a form submission. This is easy. Just add the following code to your “form” tab:

[Code]

<form action=”” method=”get” onsubmit=”return confirm(‘Are you sure?’)”>

[End of Code]

You may also like...

2 Responses

  1. Suneetha says:

    how to create new alert box with some design

  2. How to use this alert boxes? Give me some design of alert boxes………

Leave a Reply