Joomla Modal System Messages

09.24.2010
Joomla Modal System Notifications

As you probably know the Joomla! framework has a built in system message/notification system that provides users with various UI feedback messages such as errors, warnings and success.

We have put these Joomla! system messages in a modal window.

By default, most if not all, templates have this message area strategically placed within the flow of the template or page somewhere that users are sure not to miss. For instance in the default administrator template a success message looks something like this...

Default Joomla System Notification

That's nice and all, but what about a front-end design that is a little more complex in terms of the user interface and visual elements? In our case we are working on a client site that has a very horizontal, and blue, navigation system. When we put the system message at the top of the page (where it made most sense) it got visually over-powered by the navigation and the notifications were getting over-looked.

Our solution was to display the notifications in the currently popular user interface element known to all as the "modal window" and all it takes is a little javascript and CSS.

This code is based on the MooTools 1.2.4 framework and SqueezeBox 1.1 rc4.

First we need to make sure the "message" include is somewhere in our Joomla template. I added it at the very bottom right before the closing </body> tag...

     <jdoc:include type="message" />
   </body>
</html>

Second we need some javascript to display the notification in a modal. We almost always have an external javascript file that holds frequently used functions for our templates so I added this code there. It looks like this...

window.addEvent('domready', function(){
   if( $('system-message') ){
      SqueezeBox.initialize();
      SqueezeBox.open( $('system-message'), {
           handler: 'adopt',
           shadow: true,
           overlayOpacity: 0.5,
           size: {x: 600, y: 100},
           onOpen: function(){
                 $('system-message').setStyle('visibility', 'visible');
           }
      });
   }
});

What we are doing is pretty straight forward.

  1. First we make sure to initialize the modal with "SqueezeBox.initialize()"
  2. Second we create a new modal and fill it with a pre-existing element in our page—in our case the system notification which has an ID of "system-message"

That is enough to get it working, but we'll have a strange loading process which shows the system notification in the page before pulling it into the modal window. This is do to the fact that the modal does not start until the entire DOM is ready. Since the system notification is part of the DOM it will display before being pulled into the modal.

To fix this we simply set the "visibility" style of the system notification to "hidden" in our main CSS file. Then once the modal has completely opened we set the system notification style to "visible" through javascript. That is done by passing in an option to the modal like so...

onOpen: function(){
                 $('system-message').setStyle('visibility', 'visible');
}

What we have is something that looks like this...

Modal System Notification

sharing link :
category : Development