Let’s face it…  JavaScript “alert” notifications are boring and can be annoying.  They are ugly and make ding-y sounds when appearing. However, you still need to notify the user upon certain events.  What is a better way to display a dialog box to web users?  Using  jQuery, of course!

EXAMPLES:

First, let’s have an example of the “old” way of doing things with an alert box.  Click Here

Now, the new hotness example:  Click Here

The script is fairly simple, and requires very little code to implement.  No additional images are required, although they can be added on the DIV for an even more-stylized look. The effect is very smooth in comparison to the traditional alert box.  Also, this event can be applied to nearly any HTML element, including links, divs, images, buttons, etc.

There are 3 parts to integrating this: CSS, HTML, and then the onclick code inside the <a> tag.

The CSS:

<!--
div.alertbox {
  position: absolute;
  left: 0 auto;
  top: 0 auto;
  margin: 0 auto;
  width: auto;
  height: auto;
  background-color: #333;
  -moz-border-radius: 7px;
  -webkit-border-radius: 7px;
  border: 3px solid #999;
  color: #fff;
  list-style:none;
  font-size:1.1em;
  padding: 16px;
}
-->

Right now, we’re just styling the DIV to display the notification.  Notice a little extra CSS to make Chrome and FireFox show some pretty rounded corners has been included. Your CSS can be flavored to taste the way you want it to.

The HTML:

<div id="myAlert" class="alertbox" style="display:none;" onclick="$(this).fadeOut(500);">
<h1>Thank You!</h1>
The link has been clicked, and we are ready to close the dialog box.
 
<small>(click to close)</small></div>

By default, the DIV is hidden using “display:none” in the inline style attribute.  The DIV will stay on the page, and will use the built-in CSS defined.  The link onclick code will be what actually displays the DIV to the user.  Also, an onclick event has been added to the DIV to tell itself to go away when the user clicks on it.  Timing for the built-in jQuery function of “fadeOut()” and “fadeIn()” can be used to vary how your messages are displayed. You could also add additional questions or events for the user to interact with, if desired.

The link code:

<a onclick="$('#myAlert').fadeIn(1000);" href="#">Click Here</a>

Play around with the colors, the timing, and give your web guests something better to look at than the same old DING! alert box.

This entry was posted by Justin Craft on Tuesday, December 15th, 2009 at 3:41 pm and is filed under Code Logic. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

Tags: CSS, JavaScript, jQuery, UX