showMessage.js

showMessage.html

<style>
/*Popup message boxes css*/
        /*Message boxes*/
        .message-box{
            position: fixed;
            top:2%;
            left: 40%;
            /*width: 40%;*/
            border: 1px solid;
            padding: 15px 10px 15px 50px;
            margin: 1%;
            background-repeat: no-repeat;
            background-position: 10px center;
            -moz-border-radius: .5em;
            -webkit-border-radius: .5em;
            border-radius: .5em;
            opacity: 0.95;
            filter: alpha(opacity=95); 
            z-index: 1000;
            cursor: hand; 
            cursor: pointer;

        }

        .message-box .message{
            background-color: transparent !important;
            border: none !important;
        }

        .message-box-info {
            color: #00529B;
            background-color: #BDE5F8;
            background-image: url('/img/msg_icons/info24.png');
        }
        .message-box-success {
            color: #4F8A10;
            background-color: #DFF2BF;
            background-image:url('/img/msg_icons/confirm24.png');
        }
        .message-box-warning {
            color: #9F6000;
            background-color: #FEEFB3;
            background-image: url('/img/msg_icons/warning24.png');
        }
        .message-box-error {
            /*color: #D8000C;*/ 
            background-color: #FFBABA;
            background-image: url('/img/msg_icons/error24.png');
        }
    </style>

        
    <!-- Message Box Container -->
    <apex:outputPanel layout="block" styleClass="info-message-container">
    </apex:outputPanel>
        
        
<!-- Templates -->
    <div id="message-box-template" style="display:none;">
        <div class="message-box ">
            <div class="message"/>
        </div>
    </div>

<script>
        var rc = rc || {};
        rc.SUCCESS = "success";
        rc.WARNING = "warning";
        rc.ERROR = "error";
        rc.INFO = "info";


        rc.showMessagePopup = function(message, type){

            if(!type)
                type = rc.SUCCESS;
            
            message = message || '';
            message = $.trim(message);
            //remove message box if already active
            //user should not miss old error message due to new error message
            var container = $('.info-message-container');

            var curText =container.find(".message-box .message").html() || '';

            if(curText.indexOf(message)!=-1){
                return;
            }

            if(         container.find(".message-box").length
                     && type==='error'
                     && curText.indexOf(message) == -1 ){
                message = curText + '<br/><br/>' + message;
            }

            container.find(".message-box").remove();

            container.prepend($("#message-box-template").html());
            container.find('.message-box .message').html(message);
            container.find('.message-box').addClass("message-box-"+type);

            if(message.length > 50){
                container.find('.message-box').css('left','28%');
                container.find('.message-box').css('width','37.5%');
            }

            container.find('.message-box').show();

            container.find(".message-box").unbind("click").click(function(){

                container.find('.message-box').fadeOut(1000, function() {
                    $(this).remove();
                 });
            });

            setTimeout(
                function(){
                    container.find('.message-box').fadeOut(1000, function() {
                        $(this).remove();
                    });  
                }
            ,2000);
        };
 </script>