categorymessage.tpl

    <div id="textBox" style="display: none; background: #ffffff; padding: 0px; border: 10px solid #fffffff; float: left; font-size: 1.2em; position: fixed; top: 50%; left: 50%; z-index: 99999; -webkit-box-shadow: 0px 0px 20px #000000; -moz-box-shadow: 0px 0px 20px  #000000; box-shadow: 0px 0px 20px #000000; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px;">
        {$descriptionBox}
    </div>


    <script type="text/javascript">
        {literal}

        $(document).ready(function() {

            // taille de la box et id du div à afficher
            var popWidth    = {/literal}{$widthBox}{literal};
            var popID   = 'textBox'


            // faire apparaitre la fenetre modale et ajouter le bouton de fermeture
            $('#' + popID).fadeIn().css({'width': Number(popWidth)}).prepend('<a href="#" class="close"><img style="float: right; margin: -20px -20px 0 0;" src="{/literal}{$base_dir}{literal}modules/categorymessage/images/close.png" class="btn_close" title="Close Window" alt="Close" /></a>');


            // calcul la position de la fenetre
            var popMargTop  = ($('#' + popID).height() + 40) / 2;
            var popMargLeft = ($('#' + popID).width()  + 40) / 2;


            // centre la fenetre
            $('#' + popID).css({
                'margin-top'  : -popMargTop,
                'margin-left' : -popMargLeft
            });


            // ajoute le masque de fond
            $('body').append('<div id="fade" style="display: none; background: {/literal}#{$colorBackground}{literal}; position: fixed; left: 0; top: 0; width: 100%; height: 100%; opacity: {/literal}{$opaciteBackground/100}{literal}; z-index: 9999;"></div>');
            $('#fade').css({'filter' : 'alpha(opacity={/literal}{$opaciteBackground}{literal})'}).fadeIn();


            // fermeture de la fenetre
            $('a.close, #fade').click(function() {
                $('#fade , #textBox').fadeOut(function() {
                    $('#fade, a.close').remove();
                });

                return false;
            })
        });
        {/literal}
    </script>