Уведомления вместо alert() - Подсказки для разработчика

Наткнулся на один полезный код, позволяющий выводить уведомления в браузере вместо alert(), взял на заметку.

Подключаем JQuery и вставляем этот код:

var MessageBox = {
    message: function (message, messageClass, delaySec) {
        if (!message)
            return;

        delaySec = delaySec || 2000;
        messageClass = messageClass || 'normal';

        var elem = $('<div></div>', {
            'class': 'messageBox ' + messageClass,
            'style': 'display: none',
            'html': message
        });

        $('body').append(elem);
        elem.delay(200).fadeIn(500).delay(delaySec).fadeOut(500, function () {
            elem.remove();
        });
    }
}

var MessageBox = {

message: function (message, messageClass, delaySec) {

if (!message)

return;

delaySec = delaySec || 2000;

messageClass = messageClass || 'normal';

var elem = $('<div></div>', {

'class': 'messageBox ' + messageClass,

'style': 'display: none',

'html': message

});

$('body').append(elem);

elem.delay(200).fadeIn(500).delay(delaySec).fadeOut(500, function () {

elem.remove();

});

}

CSS код:

/* MessageBox */
.messageBox {
    -moz-box-shadow: 3px 3px 3px gray;
    -webkit-box-shadow: 3px 3px 3px gray;
    box-shadow: 3px 3px 3px gray;

    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;

    background: #eeeeee; /* old browsers */
    background: -moz-linear-gradient(top, #eeeeee 0%, #cccccc 100%); /* firefox */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#eeeeee), color-stop(100%,#cccccc)); /* webkit */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eeeeee', endColorstr='#cccccc',GradientType=0 ); /* ie */

    opacity: 0.92;

    position: fixed;
    left: 30px;
    top: 30px;

    border: 1px solid #ccc;
    width: 350px;
    padding: 15px;

    text-align: center;
    font-weight: bold;

    font-family: Arial;
    color: gray;
}
.error {
    color: red;
}
.success {
    color: green;
}
.notice {
    color: #DD5502;
}
.normal {
    color: gray;
}

/* MessageBox */

.messageBox {

-moz-box-shadow: 3px 3px 3px gray;

-webkit-box-shadow: 3px 3px 3px gray;

box-shadow: 3px 3px 3px gray;

-webkit-border-radius: 4px;

-moz-border-radius: 4px;

border-radius: 4px;

background: #eeeeee; /* old browsers */

background: -moz-linear-gradient(top, #eeeeee 0%, #cccccc 100%); /* firefox */

background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#eeeeee), color-stop(100%,#cccccc)); /* webkit */

filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eeeeee', endColorstr='#cccccc',GradientType=0 ); /* ie */

opacity: 0.92;

position: fixed;

left: 30px;

top: 30px;

border: 1px solid #ccc;

width: 350px;

padding: 15px;

text-align: center;

font-weight: bold;

font-family: Arial;

color: gray;

}

.error {

color: red;

}

.success {

color: green;

}

.notice {

color: #DD5502;

}

.normal {

color: gray;

}

Использовать так:

MessageBox.message('Сообщение', 'error');

1	MessageBox.message('Сообщение', 'error');