In
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.
March 10, 2009 at 5:02 pm
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!
March 10, 2009 at 11:06 pm
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” 🙂
May 29, 2010 at 1:59 pm
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”.
June 2, 2010 at 8:33 pm
guy: Good idea, that’s easy to add with jQuery.
Coolt that it’s first on Google!