Non-modal alert with jQuery

In 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.