Setting Validation Message, or other Messages at bottom of page

Show Message at Bottom of page using JQuery, CSS

Example screen shot given below.

CSS

Following is the CSS class mentioned below.

.btmDivAlert{
    z-index: 999;
    position: fixed;
    text-align: center;
    line-height: 35px;
    width: 100%;
    bottom: 0px;
    margin-bottom: 0px;
    color: White !important;
    overflow: hidden;
    right: 0px;
    background-color: Red;
    font-weight:bold;
    font-size:16px;
}

Note : You can change the background color and other things from the CSS.


Java script Function --  Common Function which set the message in the div.

function BottomMessageAlert(message) {
    $("<div class='btmDivAlert'>" + message + "</div>").appendTo('body');
    setTimeout(function () { $('.btmDivAlert').fadeOut('slow'); }, 3000);
}

Following function to be called on the page you need to put the message.

BottomMessageAlert(“Quantity should range from 1 to 99999 only.”);


Note: Mulitple calls can be made in single page.