Note (2025): This article was originally written in 2009. The example code (inline onclick, manual style.display changes) reflects practices of that era. Modern JavaScript uses event listeners, unobtrusive DOM manipulation, and CSS transitions. The post is kept here as an archive and for historical interest.

In almost all web applications comes the moment when it becomes necessary to show some notifications to the user. A common practice in the past, even when elegance was unimportant and web pages didn’t show much dynamic behavior, was the use of the method alert() from JavaScript.

Nowadays, interacting with the Document Object Model{target="_blank" rel=“noopener”} is widespread, so you can write functions in a more elegant, advanced, and enjoyable way for the user.

This behavior was made famous by Gmail{target="_blank" rel=“noopener”}. It’s nothing exceptional and can be managed with a few simple lines of code:

<div id="notification">
  Hello World!!!
  (<a href="#" onclick="document.getElementById('notification').style.display='none'; return false;">close</a>)
</div>

<script>
function closeDiv() {
  document.getElementById('notification').style.display = 'none';
}
</script>

<input type="button" value="Hide" onclick="window.setTimeout(closeDiv, 5000);" />

You can use CSS to make your DIV appear like a popup. Additionally, using a library like jQuery{target="_blank" rel=“noopener”} you can easily introduce more advanced text effects.