Show Joomla system messages in popup

Question

I am not very experienced with Joomla. That is why I need your advice. The idea is to show system messages in popup.

The solution:

1. I removed next lines in file libraries\joomla\document\html\renderer\message.php, because I dont need this div

$buffer .= "\n<div id=\"system-message-container\">";
$buffer .= "\n</div>";

2. In index.php I replaced

<jdoc:include type=”message” />

with

<?php if ($this->getBuffer('message')) : ?>
<?php
    $message = $this->getBuffer('message');
    $script  = '<div id="popup"><div id="popup-inner">'.$message.'</div></div><div id="popup-mask"></div>';
    echo $script;
?>
<?php endif; ?> 

div#popup is used for popup itself and div#popup-mask for overlay

3. I styled #popup and #popup-mask in css

#popup-mask {position: absolute; top: 0; left: 0; z-index: 9997; background: url(../images/bg-overlay.png);}
#popup {position: fixed; width: 400px; top: 40%; left: 50%; margin-left: -200px; z-index: 9999; background: #e6e6e6; border-radius: 10px; -webkit-border-radius: 10px; -moz-border-radius: 10px;}

4. And added some jQuery

jQuery.fn.showMask = function () {
    var maskHeight = jQuery(document).height();
    var maskWidth = jQuery(window).width();
    jQuery(this).css({'width':maskWidth,'height':maskHeight});
};
jQuery(document).ready(function() {
    if (jQuery('#popup-mask').length){
        jQuery('#popup-mask').showMask();
        jQuery('#popup-mask').click(function () {
            jQuery(this).hide();
            jQuery('#popup').hide();
        });
        jQuery(window).resize (function() {
           jQuery('#popup-mask').showMask();
        });
}
});

It works, but as I have already mentioned I am quite new to Joomla.

So, the question is:

- is this solution ok?

- how can it be improved?

Answer 1

I would like to suggest you that please don't change the core files of joomla unless you really need to do it for some reasons.For your situation ,you can try this it may help you.

1. Add the default Joomla system message code, if needed If this is an existing template you are using, it will probably already have the system message code somewhere where it will display Joomla’s system messages:

Code:

<jdoc:include type=”message” />

If it’s not already there, you usually want to add it right above this code:

Code:

<jdoc:include type=”component” />

1. Load Mootools which will create the animated pop-up modal message Right after the opening tag, add this code:

JHTML::(‘behavior.mootools’); JHTML::(‘behavior.modal’);

NOTE: Is you get a Mootools conflict error, your site is probably already loading Mootools. Try removing the this section of code.

1. Add the JavaScript Code to automatically “pop-up” the system message” Right before the CLOSING tag add this code:

Script:

<script type=”text/javascript”>
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’);
}
});
}
});
</script>

As per your need you can change your JAVASCRIPT and CSS.

Answer 2

I would not recommend a hack unless you really need to. In this case I don't think you need to. Instead this should work for you:

Wrap your system messages in a DIV (in your template index.php file) like this:

<div d="systmsg" onclick="javascript:this.style.display='none';"><jdoc:include type="message" /></div>

And then some css:

#systmsg {
position:absolute;
text-align:center;
width:100%;
top:300px (what you want)
}

#system-message {
display:block;
width:(what you want);
max-height:(what you want);
margin-left:auto;
margin-right:auto;
z-index: 100;
}

Link to this example can be found here.