В этом уроке мы покажем, как создать полупрозрачный слой, который накрывает всю страницу, и блок сообщений, который может быть закрыт. Затем мы добавим библиотеку jQuery, которая заставит появляться накрывающий слой и выезжать из верхнего края страницы блок сообщений. Посмотрите демонстрацию работы по ссылке.

Демонстрация работы – Скачать исходный код

HTML

Нам нужно всего два элемента в нашем html-коде: блок для накрывающего слоя и блок для блока сообщений. В блоке сообщений будет ссылочный элемент для уменьшенного изображения закрывающей кнопки и текст. И вот что получается:

<div id="overlay" style="display:none;"></div>

<div id="box">

<a 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>
</ 

Так как мы будем ссылаться на эти два основных элемента позже в JavaScript, нам нужно дать им идентификаторы. Вы можете разместить блоки для накрывающего слоя и блока сообщений где Вам удобно, прямо в элементе 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;
}

Здесь мы растягиваем этот блок, задавая ему позицию 0 со всех сторон. Так что не важно, насколько широкое окно у браузера, эти свойства всегда растянут его на всю страницу. Использование свойства position:fixed будет всегда держать блок на одном месте, вне зависимости от прокрутки страницы. Если бы мы использовали свойство position:absolute, наш блок накрывал бы только верхнюю видимую часть страницы, но не включал нижнюю часть страницы, видимую после прокрутки. Значение свойства z-index должно быть очень высоким, чтобы поместить этот элемент выше других элементов, кроме блока сообщений.

У блока сообщений будут такие свойства 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;
}

Мы снова задаем фиксированное положение блока, так как нам нужно, чтобы блок сдвигался, когда мы прокручиваем страницы. Мы устанавливаем отрицательное значение свойству top, так как нам нужно, чтобы блок сообщений был вне нашего окна, т. е., чтобы он был невидим вначале. Мы не задаем свойство display:none, так как мы хотим, чтобы блок сообщений появлялся, выезжая из верхнего края, поэтому нам нужно поработать с позиционированием.

Чтобы поместить элемент в центр страницы, мы просто задаем ему одинаковые расстояния справа и слева. Использование процентов позволяет хорошо адаптировать элемент ко всем размерам экрана, не забывайте, что они могут сильно отличаться.

Свойства CSS3 добавят скругления углам и тени блоку сообщений. Но они будут работать не во всех браузерах.

Значение свойства z-index должно быть больше, чем у накрывающего слоя. Так что мы просто добавим к нему единицу. Убедитесь, что у Вас нет элементов с абсолютным позиционированием с более высоким значением свойства z-index.

У закрывающего крестика блока сообщений будут такие стили:

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;
}

Этот маленький элемент должен наполовину высовываться из блока сообщений, и, так как у блока сообщений есть внутренний отступ 20 пикселей, мы вытолкнем элемент выше и правее, установив ему отрицательное значение внешнего отступа -30 пикселей для этих сторон. Отрицательные внешние отступы могут быть использованы разными способами, чтобы помочь Вам располагать элементы, не бойтесь их использовать, это хороший практический прием. Здесь вы можете прочесть очень полезную статью об этом, написанную Dan Cederholm.

У элементов с тегом 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.

JavaScript

Следующий код добавляется в конце файла 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');

});

});
});

Элемент #activator применяется к каждому элементу на странице, который должен вызвать накрывающий слой и появление блока сообщений. В примере мы просто добавили ссылочный элемент со стилями с таким идентификатором.

Когда на запускающий элемент нажимают, накрывающий слой должен появиться очень быстро, и после этого другая функция должна выполниться, заставляя блок сообщений выехать из верхнего края. Это то, что делает функция animate(). Дальше мы указываем, что значение свойства top должно быть 160 пикселей, что означает, что мы хотим, чтобы блок сообщений передвинулся с его текущего положения на положение top:160px, и что это должно занять 500 миллисекунд.

После того, как накрывающий слой и блок сообщений появились, мы хотим иметь возможность закрыть блок сообщений, нажимая на уменьшенное изображение крестика. Функция, которая это делает, сначала заставит блок сообщений уехать вверх на его старое положение top:-200px, а после этого заставит исчезнуть накрывающий слой.

Имейте ввиду, что начальное положение блока сообщений -200px зависит от высоты блока. Если Ваш блок сообщений длиннее, убедитесь, что значение его начального положения меньше, например, -500px, если Ваш блок сообщений 500px в высоту.

И это все! Попробуйте поэкспериментировать со скоростью появления элементов. Вы также можете заменить значение fast на любое значение в миллисекундах. И Вы можете сделать так, чтобы блок сообщений выезжал слева или справа, для этого Вам только нужно изменить начальные значения и значения в функциях JavaScript.

Наслаждайтесь!

Демонстрация работы – Скачать исходный код

Автор урока Mary Lou

Перевод — Дежурка

Смотрите также:

• Создаем выезжающее меню с использованием CSS и jQuery
• Создаем выезжающий блок меню с помощью jQuery и CSS3
• Создание выезжающих блоков связанных сообщений с помощью jQuery и CSS3