Всем привет! Недавно поступила задача динамически вывести сообщения на события, которые вызывает посетитель сайта. Давайте попробуем создать информативные сообщения на сайте при помощи JQuery и CSS.
Всплывающие окна имеют широкий диапазон применений — от полезного для потребителя программного обеспечения до злоумышленного.
Наиболее широкое применение всплывающие окна приобрели для размещения рекламных сообщений и информативных оповещений в сети. Содержащие рекламу всплывающие окна открываются на переднем (pop-up) или на заднем фоне (pop-under). Последнее является более изощрённым приёмом распространения нежелательных для пользователя рекламных сообщений, поскольку не привлекает внимание пользователя до тех пор, пока активное окно не будет закрыто, и затрудняет возможность определения источника появления всплывающего окна.
HTML
<div class="info message"> <h3>Привет!</h3> <p>Это обычное информационное сообщение)</p> </div> <div class="error message"> <h3>Ой-ой-ой ОШИБКА!(</h3> <p>Это обычное сообщение об ошибке)</p> </div> <div class="warning message"> <h3>Внимание внимание!</h3> <p>Это обычное сообщение о предупреждении)</p> </div> <div class="success message"> <h3>Ура ура!</h3> <p>Это обычное сообщение об удачном выполнении задачи)</p> </div> <div id="main-container"> <p>ЖМИ!!!</p> <ul id="trigger-list"> <li><a href="#" class="trigger info-trigger">Все нормально...</a></li> <li><a href="#" class="trigger error-trigger">Все плохо(</a></li> <li><a href="#" class="trigger warning-trigger">Все неопределено...</a></li> <li><a href="#" class="trigger success-trigger">Все отлично)</a></li> </ul> </div>
В данном коде, как вы видете, приведены такие виды сообщений, как: информационное сообщение, сообщение об ошибке, предупреждение и сообщение об успешном выполнении операции.
Далее пропишем стили, а именно выполнение анимированных диагональных полосок сообщений.
CSS
.message
{
-webkit-background-size: 40px 40px;
-moz-background-size: 40px 40px;
background-size: 40px 40px;
background-image: -webkit-gradient(linear, left top, right bottom,
color-stop(.25, rgba(255, 255, 255, .05)), color-stop(.25, transparent),
color-stop(.5, transparent), color-stop(.5, rgba(255, 255, 255, .05)),
color-stop(.75, rgba(255, 255, 255, .05)), color-stop(.75, transparent),
to(transparent));
background-image: -webkit-linear-gradient(135deg, rgba(255, 255, 255, .05) 25%, transparent 25%,
transparent 50%, rgba(255, 255, 255, .05) 50%, rgba(255, 255, 255, .05) 75%,
transparent 75%, transparent);
background-image: -moz-linear-gradient(135deg, rgba(255, 255, 255, .05) 25%, transparent 25%,
transparent 50%, rgba(255, 255, 255, .05) 50%, rgba(255, 255, 255, .05) 75%,
transparent 75%, transparent);
background-image: -ms-linear-gradient(135deg, rgba(255, 255, 255, .05) 25%, transparent 25%,
transparent 50%, rgba(255, 255, 255, .05) 50%, rgba(255, 255, 255, .05) 75%,
transparent 75%, transparent);
background-image: -o-linear-gradient(135deg, rgba(255, 255, 255, .05) 25%, transparent 25%,
transparent 50%, rgba(255, 255, 255, .05) 50%, rgba(255, 255, 255, .05) 75%,
transparent 75%, transparent);
background-image: linear-gradient(135deg, rgba(255, 255, 255, .05) 25%, transparent 25%,
transparent 50%, rgba(255, 255, 255, .05) 50%, rgba(255, 255, 255, .05) 75%,
transparent 75%, transparent);
-moz-box-shadow: inset 0 -1px 0 rgba(255,255,255,.4);
-webkit-box-shadow: inset 0 -1px 0 rgba(255,255,255,.4);
box-shadow: inset 0 -1px 0 rgba(255,255,255,.4);
width: 100%;
border: 1px solid;
color: #fff;
padding: 15px;
position: fixed;
_position: absolute;
text-shadow: 0 1px 0 rgba(0,0,0,.5);
-webkit-animation: animate-bg 5s linear infinite;
-moz-animation: animate-bg 5s linear infinite;
}
.info
{
background-color: #4ea5cd;
border-color: #3b8eb5;
}
.error
{
background-color: #de4343;
border-color: #c43d3d;
}
.warning
{
background-color: #eaaf51;
border-color: #d99a36;
}
.success
{
background-color: #61b832;
border-color: #55a12c;
}
.message h3
{
margin: 0 0 5px 0;
}
.message p
{
margin: 0;
}
@-webkit-keyframes animate-bg
{
from {
background-position: 0 0;
}
to {
background-position: -80px 0;
}
}
@-moz-keyframes animate-bg
{
from {
background-position: 0 0;
}
to {
background-position: -80px 0;
}
}
#trigger-list
{
text-align: left;
margin: 50px 0;
padding: 0;
}
#trigger-list li
{
display: inline-block;
*display: inline;
zoom: 1;
}
#trigger-list .trigger{
background: #91bd09; url(alert-overlay.png) repeat-x;
display: inline-block;
padding: 5px 10px 6px;
color: #fff;
text-decoration: none;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-moz-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
-webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
text-shadow: 0 -1px 1px rgba(0,0,0,0.25);
border-bottom: 1px solid rgba(0,0,0,0.25);
position: relative;
cursor: pointer;
}
#trigger-list .trigger:hover
{
background-color: #749a02;
}
Изначально спрячем все сообщения при помощи фиксированного позиционирования (значение absolute используется только для IE6, так как он не поддерживает position:fixed ).
position: fixed; _position: absolute; /* IE6 */
И так, CSS готов, приступим к jQuery. Сначала создадим массив сообщений которые будем обрабатывать и выводить:
JavaScript
var myMessages = ['info','warning','error','success'];
Далее рассмотрим функцию, которая скрывает все сообщения.
В зависимости от количества текста высота сообщения может изменяться динамически, поэтому высота сообщений вычисляется, чтобы скрывать сообщения корректно.
JavaScript
function hideAllMessages()
{
var messagesHeights = new Array(); //массив с высотой всплывающих сообщений
for (i=0; i<myMessages.length; i++)
{
messagesHeights[i] = $('.' + myMessages[i]).outerHeight();
$('.' + myMessages[i]).css('top', -messagesHeights[i]); //выводим сообщение из окна
}
}
Функция showMessage вызывается при нажатии на кнопку, она и отвечает за анимацию сообщения и точку остановки на экране, так как всплывающие сообщения показываются под шапкой (это хорошо видно на демонстрации).
JavaScript
function showMessage(type)
{
$('.'+ type +'-trigger').click(function(){
hideAllMessages();
$('.'+type).animate({top:"100"}, 500);
});
}
После загрузки страницы скрываем все сообщения: hideAllMessages(). Затем при нажатии на соответствующую кнопку выводим сообщение:
JavaScript
$(document).ready(function(){
//Скрываем все
hideAllMessages();
//Выводим сообщение
for(var i=0;i<myMessages.length;i++)
{
showMessage(myMessages[i]);
}
//Скрываем сообщение при нажатии на него
$('.message').click(function(){
$(this).animate({top: -$(this).outerHeight()}, 500);
});
});