На днях я создавал всплывающие сообщение для плагина Codys jTextTranslate jQuery и подумал, что было бы полезно описать эту технику в статье.
Итак, я хочу показать вам, как создать полупрозрачный фон, который охватит всю страницу, и окно сообщения, которое можно используя не хитрый код показывать при клике по нужному элементу страницы, например, кнопки.
Затем я покажу вам, как добавить jQuery, который заставит задний фон плавно появляться, а всплывающие сообщение будет скользить вниз от верхней части страницы (посмотрите демо, чтобы решить будет ли полезен вам этот эффект).
Ок, давайте приступим к работе.
Добавляем HTML разметку для нашего всплывающего сообщения
Нам понадобиться два HTML элемента: тег div для нашей подложки и div для контейнера с сообщением. В контейнере с сообщением будет находиться кнопка для закрытия данного эффекта и какой-нибудь текст.
<div class="overlay" id="overlay" style="display:none;"></div>
<div class="box" id="box">
<a class="boxclose" id="boxclose"></a>
<h1>Important message</h1>
<p>
Here comes a very important message for your user.
Turn this window off by clicking the cross.
</p>
</div>
Поскольку мы будем ссылаться на эти два основных элемента в JavaScript позже, мы должны указать им id. Вы можете разместить подложку и контейнер с сообщением в любом месте сайта как прямой дочерний элемент у тега body.
Задний фон для сообщения мы изначально спрячем, указав ему display: none. А показывать будем, используя CSS.
Давайте теперь разберемся со стилями.
Стили CSS
Для наложения фона мы просто используем прозрачное изображение, которое будет повторяться. Мы могли бы также создать темный фон и сделать его прозрачным используя свойства CSS, но в этом примере поработаем с картинкой.
.overlay{
background: transparent url(images/overlay.png) repeat top left;
position: fixed;
top: 0px;
bottom: 0px;
left: 0px;
right: 0px;
z-index: 100;
}
Что мы здесь делаем, так это растягиваем div, чтобы со всех сторон его позиция была равна 0. Таким образом, независимо от того, насколько широким будет является окно браузера, оно всегда будет растягиваться по всей странице. Использование position: fixed будет держать фон на 0 независимо от того, где вы находитесь на странице, например, после прокрутки. Если бы мы использовали position: absolute, мы бы просто покрыли видимую (верхнюю часть страницы), не включая часть после прокрутки вниз. Z-индекс должен быть очень высоким, чтобы поместить контейнер с сообщением поверх всех остальных (кроме окна).
Контейнер с сообщением будет иметь следующие CSS свойства:
.box{
position: fixed;
top: -200px;
left: 30%;
right: 30%;
background-color: #fff;
color: #7F7F7F;
padding: 20px;
border: 2px solid #ccc;
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
-khtml-border-radius: 20px;
-moz-box-shadow: 0 1px 5px #333;
-webkit-box-shadow: 0 1px 5px #333;
z-index: 101;
}
Опять же, у нас есть фиксированный контейнер, потому что мы хотим, чтобы он двигался по мере прокрутки. Для исходного положения мы используем отрицательные значения, поскольку хотим, чтобы область контейнера с сообщением была снаружи, т. е. не видна в начале. Мы не просто прячем display: none, так как хотим, чтобы сверху наш контейнер с сообщением появлялся плавно, поэтому нам нужно поработать с позиционированием.
Для того, чтобы отцентрировать элемент на странице, мы просто создаем такое же расстояние справа, как и слева. Использование процентов позволяет хорошо адаптировать элементы ко всем размерам экрана – имейте в виду, что они могут сильно различаться.
Новые свойства CSS3 добавляют некоторые закругленные границы и некоторую тень контейнера. Они не будут работать в IE, хотя z-индекс должен быть больше, чем индекс фона. Здесь мы просто добавим его. Убедитесь, что у вас нет абсолютных позиционированных элементов с более высоким z-индексом.
Для кнопки закрытия сообщения будут использованы следующие стили:
a.boxclose{
float: right;
width: 26px;
height: 26px;
background: transparent url(images/cancel.png) repeat top left;
margin-top: -30px;
margin-right: -30px;
cursor: pointer;
}
Этот маленький элемент, который должен быть «снаружи» окна и контейнера с сообщением, и поскольку у обертки padding равняется 20 пикселей, мы «вытягиваем» элемент вверх и вправо, задавая ему отрицательные значения -30 пикселей для этих сторон. Отрицательные значения могут быть использованы во многих случаях, чтобы помочь вам позиционировать элементы, не бойтесь использовать их, это хороший пример в практике – чуть подробнее об использование отрицательных отступов можно почитать на одном из забугорных сайтов.
Для заголовка h1 также укажем следующие стили:
.box h1{
border-bottom: 1px dashed #7F7F7F;
margin: -20px -20px 0px -20px;
padding: 10px;
background-color: #FFEFEF;
color: #EF7777;
-moz-border-radius: 20px 20px 0px 0px;
-webkit-border-top-left-radius: 20px;
-webkit-border-top-right-radius: 20px;
-khtml-border-top-left-radius: 20px;
-khtml-border-top-right-radius: 20px;
}
Опять же, мы применяем отрицательные отступы, чтобы вытащить элемент на место. Обратите внимание, что свойства CSS3 Mozilla могут быть записаны в сокращенном виде.
Ок, это был CSS, теперь давайте перейдем к финальной части JavaScript.
Добавляем динамику для сообщения используя jQuery
Следующий код добавляется в конце HTML прямо перед закрывающим тегом body:
$(function() {
$('#activator').click(function(){
$('#overlay').fadeIn('fast',function(){
$('#box').animate({'top':'160px'},500);
});
});
$('#boxclose').click(function(){
$('#box').animate({'top':'-200px'},500,function(){
$('#overlay').fadeOut('fast');
});
});
});
Указав любому элементу на странице id=activator мы сможем при клике запустить всю реализованную нашу логику для красивого отображения всплывающего окна. В демо я просто добавил стилизованный элемент ссылки с этим идентификатором.
Когда мы кликаем по элементу с id=activator, задний фон должен очень быстро затемниться, и сразу после этого должна быть выполнена другая функция, которая заставляет окно скользить сверху. Вот что делает animate(). Кроме того, в значении свойства top должно быть указанно 160 пикселей, мы хотим, чтобы окно переместилось из текущей позиции в позицию top:160px, и это должно занять 500 миллисекунд.
После того, как затемнённый фон и контейнер с сообщением появились, мы хотим иметь возможность вернуть всё, как и было, нажав на «крестик». Функция для этого сначала заставляет окно снова скользить вверх к предыдущей позиции (top: - 200px) и скрывает затемнённый фон. Имейте в виду, что начальное положение окна - 200px зависит от его высоты. Если ваше окно больше по высоте, убедитесь, что начальное верхнее значение ниже (т. е.-500px, если ваше окно высотой 500px).
И на этом у меня все! Попробуйте поэкспериментировать со скоростью появления элементов. Вы также можете заменить «fast» на любое значение в миллисекундах. И вы также можете сделать всплывающие сообщения справа налево, для этого, вы просто должны адаптировать начальные значения и значения в функциях JavaScript.