Наткнулся на один полезный код, позволяющий выводить уведомления в браузере вместо alert(), взял на заметку.
Подключаем JQuery и вставляем этот код:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
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 код:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 |
/* 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; } |
Использовать так:
1 |
MessageBox.message('Сообщение', 'error'); |