In usability we trust

UX and all things web

Non-modal alert with jQuery

jquery-logoIn circumstances where you want to notify the user of something, like for example that some information have been saved, a non-modal alert is an excellent solution. It gets your message across without being intrusive and without the need for uneccesary user interaction.

In this article I will describe how to create it with the help of jQuery

The basics

The whole idea with this approach is to make the user aware that something has happened, or that an action has been performed. You want to make sure that the message gets across but at the same time you don’t want to annoy the user or get in his or hers way. One way to do this is to show a message across the screen that as soon as the user moves the mouse, clicks a mouse button or press a key on the keyboard fades away.

The HTML

The HTML is straightforward. Just insert this code somewhere in your HTML. Preferably at the top or the bottom of it. Just make sure it’s not inside a container with an absolute or relative position.

<div class="message">
    <p>This is a non-modal alert</p>
</div>

Give it some style

We will want the message to hover over the page. Therefor we want it to have an absolute position. By setting the width of the containing <div> to 60% and it’s left position to 20% it’s going to appear centered on the screen.

The other declarations are just for the visual appearance of the message.

.message {
    position: absolute;
    top: 145px;
    width: 60%;
    left: 20%;
    background: #ff9;
    border: 1px solid #fc0;
    font-size: 150%;
    padding: 15px 50px;
}
.message p {
    margin: 0;
    padding: 0 40px 0 20px;
    text-align: center;
}

The Javascript

The Javascript essentially checks if there’s a an element with the class message in the web page. If there is, it attaches a few events on it that when triggered, removes the message.

Notice that I use one() instead of bind() to attach the events. The reason being that once the event is triggered i doesn’t have to trigger again. With one(), jQuery automatically unbinds the event after it’s been triggered.

$(document).ready(function(e) {
    // Check if there's a message	
    if($('.message').length) {
         // If mouse is clicked, moved or a key is pressed
         $(document).one('click mousemove keypress', function(e) {
            // Fade the message away after 500 ms
            $('.message').animate({ opacity: 1.0 }, 500).fadeOut();
        });
    }
});

Notice in the part where the alert is faded out, there’s first animate({ opacity: 1.0 }, 500). This is a hack to get a 500 ms long delay before the message starts to fade out. What it actually does is to change the opacity of the element to 1.0 over a timespan of 500 ms. But since the element already has the opacity 1.0 it just creates a 500 ms long delay before the fadeOut() part is executed.

This is all good and works well in most browsers except… you guessed it, Internet Explorer.

Extra tweaks for Internet Explorer

The problem in Internet Explorer is that the mousemove event triggers instantly even if you haven’t moved the mouse. Because of this we have to insert a short delay before the events are attached. In this example I’ve done it by moving the logic to remove the message to a function, removeMessage(), which I call from the setTimeout function. The second argument of setTimeout determains the delay in ms before removeMessage() is invoked.

$(document).ready(function(e) {
     // Check if there's a message	
     if($('.message').length) {
         // the timeout is there to make things work properly in IE
         // If we have no timeout IE will trigger mousemove instantly
         setTimeout(removeMessage, 500);		    
    }
});
function removeMessage(){
    $(document).one('click mousemove keypress', function(e) {
        // Fade the message away after 500 ms
        $('.message').animate({ opacity: 1.0 }, 500).fadeOut();
    });		
}

That’s it. Sadly the code is slightly less elegant, but at least i works in all browsers.

Check out the Live demo

Conclusion

I have found this solution to be an excellent way to tell the user what’s going on in an unobtrusive, but still obvious way. I hope that you’ll find it useful too. If you have a more elegant way of overcoming the problem with IE or other ideas on how to enhance this solution, don’t hesitate to tell me.

4 Comments

  1. Gab,

    We must consider the user-“dumbness”. The non-modality is great but I think a “dismiss” (or close) button is well fit than mouse/kbd events.

    User may trigger this events unconsciously and miss the alert. Users tend to navigate with the hand on the mouse (excluding the older ones that reads following text with the cursor) and optical mouses tend to be sensitive.

    If the alert serve the purpose of a marketing action or just an informative message there is a good chance users will miss it.

    Regards!

  2. Jan: I agree with you that it can be missed by users looking away from the screen. I also agree that it’s probably not well suited for marketing actions. I do however think that it’s excellent for informative messages like “The post have been saved” or “The item has been deleted”.

    In the script is built in a delay so that the message doesn’t disappear instantly. This should help preventing some of the occasions where it could otherwise be missed.

    By the way. Love your term user-“dumbness” 🙂

  3. If the dialog had some sort of fade in or any other animation it would be much harder to miss.

    Thanks for the post, it’s first on Google for “JavaScript non modal alert”.

  4. guy: Good idea, that’s easy to add with jQuery.

    Coolt that it’s first on Google!

Leave a Reply to guy Cancel reply

Your email address will not be published.

*