This tutorial is an answer to this feature request. Its purpose is to get a module that "falls" from the top of the browser window when user loads a new page and some event just happened.
I use it for inbox message incoming, or for touch events.

Note1: I wrote this tutorial because it was asked in this feature request to MightyExtension team to build this feature in their event modules (mod_js_inbox messages or mod_community-events).
But it's not really ME responsability since it's just a "template thing" or a Joomla thing! Since I had this feature working fine in my site for months, I decided to share it with the community.

Note2: One of the big forces of ME scripts is that you are not bounded to some specific layout or aesthetics, since template design and css is your responsability, above the standard templates and layouts provided by ME. Try to do that with Azrul, for example…
In this case, you can get popups in the boring and ugly Facebook style, or something much fancier, depending on your audience and your originality.

Principles

The modules themselves (mod_js_inbox messages or mod_community-events) stay untouched.

You put these modules in a special position. I use 'top' position, but it depends on your template.

Then , we use Chrome in order to select modules that are set in the given position, and to apply them some javascript to get the popup. The module falls down to some place, then bounces some times. A close button is added, in order to make the module invisible if user doesn't want to act immediately upon the signalled event.

To read before:

If you never used modules Chrome in Joomla, please read this introduction to understand what I'm talking about.

How to do?

In your template:

Find the upper module call:

I mean the module call nearest of the body opening tag. So, it's the upper module position.
You find it by searching

jdoc:include type="modules"

in the index.php file of your template. For example, <jdoc:include type="modules" name="top" style="xhtml" />

Note: In the following, I guess the position is "top", but it can be something else, it depends on your template. For clarity, I use "top".

Replace style="xxxx" by style="my_custom_mod_style" or whatever you like. For example, mine is:

<jdoc:include type="modules" name="top" style="demz" />

In your site backend:

1. Check that no static module is set to the "top" position.
2. Make a copy of mod_js_inbox messages and/or mod_community-events and set them to "top" position.

Files manipulations

Module chrome.

Open the file module.php with the attached file given as an example below (since there is no file field in the tutorials, I had to add module.php content to  this article text…). Read carefully comments, since chrome is always customised, it will depend on your configuration.

Note: Be careful to name the function "modChrome_my_custom_mod_style()", where "my_custom_mod_style" is the style name you already gave in the jdoc module calls.

Modify it at your will.

Upload it in templates/your_template/html/

Javascript

Upload fallinmodule.js somewhere in libraries/your_customised_libraries
Don't forget to set path to this file in module.php (in the 'defines' at top of code)

Add css

The css are in file modpopup.css. They are to be modified at your will and added in your template css.

Tip: Be careful with the close button not to cover it this the title header tag, or it won't be clickable! I use a width:80% in its css to avoid this.

You're done!

Using it with system messages

To get rid of very ugly Joomla messages, you can use this system too.
In index.php of your template, find something like:

<?php if ($this->getBuffer('message')) : ?>
<jdoc:include type="message" />
<?php endif; ?>

Replace it with:

<?php if ($this->getBuffer('message')) : ?>

<ddiv id="dropin" class="msg_err" style="position:absolute;visibility:hidden;z-index: 1000;">

<a href="#" class="bloc right resource rsce_depublie" onclick="dismissbox();return false">&nbsp;</a> <ddiv class="notife">

<hh2><?php echo JText::_('SYSTEM MESSAGE'); ?> </hh2>

<jdoc:include type="message" />

</ddiv>

</ddiv>

<?php endif; ?>

Note: Change ddiv to div and hh2 to h2!

Module.php (copy/paste it, sorry for the inconvenience):

<?php

/* -*-php-*-

*  Copyright © 2011 Atout Technologies

*  This model is the proprietary property of Atout Technologies.

* #############################################################################

*   AT_ME03 - a family of  IPs for Joomla with Mighty Extensions

*   File Name             : "module.php"

*   Creation date         :  2010-06-05 16:55:49

*   Author(s)             : Jacques Verhaeghe

*   Last modified date    : 2011-03-10 08:32:29

*   E-mail: j.verhaeghe@nutellmavores.org

*   Mail:   Atout Technologies

*           Route du Plan 13860 Peyrolles, France

*   Version history:

*  modified   by  rev reason

*  ---------- --- --- -----------

*  2010-06-05 JV 1.0 original

*  2011-03-10 JV 1.0 version with explanations for tutorial on ME site

* #############################################################################

*

* Functional description : Module Chrome for popup of event modules

*

* #############################################################################

*

* Files called :fallinmodule.js

*

* #############################################################################

*/

/*name of function shall be modChrome_xxxx where xxxx is the style name as given in template jdoc module calls.

*/

function modChrome_demz( $module, &$params, &$attribs ) {

define ('LIBRARY', 'demz/'); // to be modified to fit with customised library location. Don't forget the slash!!

define ('LEFT_POS', '200'); //  Falling module param: to be modified to set module fall point position from top left corner

define ('TOP_POS', '350'); //  Falling module param: to be modified to set module fall point position from top left corner

/* PARSING MODULE STYLE as configured in back-end. THIS IS TEMPLATE DEPENDANT, SO MODIFY IT TO FIT TO YOUR NEEDS

Example1:                   -ario          h3online    h3norm_0    tri1_leger              sans_bas

Example2:                   -ario          h3event     h3red       horzlines_rouge_haut

Position in moduleclass_sfx    0            1           2           3                       4

variable                                   $h3icon     $styleTitr  $fondMod                $specMod

meaning                     base          title icon   title style  module background       special

*/

$classe = $params->get( 'moduleclass_sfx', '_menu h3online h3norm_0 gris_leger' ); // set default value according to your template

$classe = trim( $classe );

$classe = str_replace('  ',' ',$classe);

$tabl_classe = explode(' ',$classe);

$falling = false;

// this switch selects according to position. Apart from 'top', the remaining is for my site.

switch ( $module->position ) {

case 'left':

$position = ' modG';

break;

case 'right':

$position = ' modD';

break;

case 'advert1':

$position = ' modM';

break;

case 'advert2':

$position = ' modM';

break;

case 'top':             // FOR POPUP

$position = ' modM';

$falling = true; // <- this variable is true if we are in the popup position

break;

default:

$position = '';

break;

}

$generik = trim($tabl_classe[0]);

$h3icon = trim($tabl_classe[1]);

$styleTitr = trim($tabl_classe[2]);

$fondMod = trim($tabl_classe[3]);

$specMod = ' '.trim($tabl_classe[4]);

/* END OF PARSING STYLE*/

if (trim(strip_tags ( $module->content ) ) ) { // we output something if there is something to output

/* MODULE TITLE */

$titre = ''; // we prepare module title

if ( $module->showtitle ) {// titre + icône en fond . Customized part for title. Note twice the title in order to get 3D title!

$titre .= '<div class="' . $styleTitr . '" >';

$titre .= '<h3 class="' . $h3icon . '" >' . $module->title . '</h3>';

$titre .= '<h3 class="titrmod_top" >' . $module->title . '</h3>';

$titre .= '</div>';

}

/*END OF MODULE TITLE */

/* MODULE CONTENT */

$content = '<div class="' . $fondMod .'">'. $module->content . '</div>'; //

/*END OF MODULE CONTENT */

$out = '';

/* POPUP OR NO POPUP */

$popup = '';

if( $falling ) { //

$document = &JFactory::getDocument();

$document->addScript(JURI::root().'libraries/'.LIBRARY.'fallinmodule.js'); // calling JS for popup

$out .= '<div class="falling-mod" id="dropin" style="position:absolute;visibility:hidden;z-index: 10000;left:'.LEFT_POS.'px;top:'.TOP_POS.'px;"';// don't change id and style !

$out .= '<a class="right" href="#" onClick="dismissbox();return false"><img src="'.JURI::root().'images/M_images/close_22.png" title="'.JText::_( 'CLOSE' ).'" alt="'.JText::_( 'CLOSE' ).'" width="22" height="22" /></a>'; // close button

$out .= '<div class="courrier">'; // customised class which contains the module.

$out .= $titre.$content;

$out .= '</div>';

$out .= '</div>';

} else {

$out .= '<div class="modu' .$generik . $position . $specMod .'"'.$popup.'>'; // standard module output (for my template)

$out .= $titre . $content;

$out .= '</div>';

}

echo $out;

}

}

?>

JAVASCRIPT (copy/paste and call it fallinmodule.js):

CSS used in popups (copy/paste and add to your css):

 div.msg_err, div.falling-mod { /* uses css3! Be careful if you care of previous century browsers */  

left: 300px; 

 height:auto; 

 background-color: rgba(60,90,128,0.75); 

 border: 3px solid #405A80;
	-

webkit-border-radius: 16px; 

 -moz-border-radius: 16px; 

 -o-border-radius: 16px; 

 border-radius: 16px; 

 box-shadow: 4px 4px 6px #999; 

 -moz-box-shadow: 4px 4px 6px #999; 

 -webkit-box-shadow: 4px 4px 6px #999;
    padding: 4px;

 } 

div.msg_err { /* this one to use popup for system messages. */

 left: 300px; 

 width:400px; 

 background-color: rgba(55,3,28,0.75); 

 border-color: #4A0566; 

} 

div.notife {/* this one to use popup for system messages. */ 

 background: url(../images/fille_msg_sys.png) no-repeat; 

 padding-left:80px; 

}

 div.courrier {/* this one to use popup for inbox messages, or Touch events. */

 background: url(../images/fille_courrier.jpg) no-repeat; 

 padding-left:200px; 

 min-height: 230px; 

} 

 div.notife h2, div.courrier h2 { 

 color: #B2E21E; 

}

 .right { 

 float: right; 

}

 a.right{ 

 display: block; 

 margin-left: 5px; 

}