Яндекс.Метрика

Дизайн-журнал №1. Актуальная информация для дизайнеров, веб дизайнеров, программистов и разработчиков сайтов.

Выезжающий поверх страницы блок сообщений при помощи CSS и jQuery

3 февраля 2014 | Опубликовано в css | 11 Комментариев »

В этом уроке мы покажем, как создать полупрозрачный слой, который накрывает всю страницу, и блок сообщений, который может быть закрыт. Затем мы добавим библиотеку 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

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

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




Комментарии

  1. Merziuz
    Thumb up Thumb down 0

    QmVf7m pills2sale.com viagra online

    Ответить

  2. Jonah
    Thumb up Thumb down 0

    Another service? cheap medication Catholic faithfuls attend the World Youth Day (WYD) opening mass, at Copacabana beach in Rio de Janeiro, Brazil, on July 23, 2013. The highlight of the landmark visit of Pope Francis to the world's most populous mainly Catholic country will be WYD, a five-day event that kicks off today. Pope Francis's popularity on his Latin American home turf posed a challenge to Brazilian authorities Tuesday after adoring crowds mobbed his car on his arrival on Monday.

    Ответить

  3. Anthony
    Thumb up Thumb down 0

    I do some voluntary work oxcarbazepine vs carbamazepine levels Celebrities may look phenomenal on the red carpet, but they also have hordes of makeup artists at the ready for even the tiniest of touchups. Catch them without the thick layers of powder, smoky eyesh...

    Ответить

  4. Mikel
    Thumb up Thumb down 0

    It's OK buy arimidex in canada Since the bottom of the recession just over four years ago, commercial bank loans and leases have grown 4.0 percent, one of the weakest post-recession recoveries in terms of borrowing since the 1960s, according to Paul Kasriel, the former chief economist of Northern Trust Company. For comparison, over the same period after the July 1990-March 1991 recession, loans and leases grew over four times faster.

    Ответить

  5. Michel
    Thumb up Thumb down 0

    Jonny was here viagra premature ejaculation Certain things have been stripped down, though. You won't craft weapons; you'll simply get or «discover» new ones at certain times. And there is no base-building. Such absences may invite another group of gamers into the franchise, drawing fans looking for a fresh, slightly more nuanced third-person shooter, or even drawing gamers still searching for another Mass Effect fix.

    Ответить

  6. Wilbert
    Thumb up Thumb down 0

    How long are you planning to stay here? ciprofloxacino gotas oticas ahumada "Landis defrauded his fans and other donors in order to amass a fund to pay the legal fees he racked up litigating his false denials, " they wrote. "Now he would like to be paid for casting the first stone. "

    Ответить

  7. Johnathon
    Thumb up Thumb down 0

    I'd like to send this letter by metoprolol succinate 25 mg cost Gum disease is often considered a ‘silent disease' because many people have no symptoms in the early stages and do not realise they have a problem until it becomes more severe. Symptoms can include swollen gums, bleeding gums — particularly after brushing — pain when biting food and gums that appear pulled away or low down from the teeth.

    Ответить

  8. Ronald
    Thumb up Thumb down 0

    Could I ask who's calling? pepcid complete mint chewable Ala al-Rafati, the Hamas-appointed minister of the economy, said up to 90 percent of the tunnels had now been destroyed by the Egyptian army and those still open were not operating fully. He put the losses to the Gaza economy since June at $460 million.

    Ответить

  9. Osvaldo
    Thumb up Thumb down 0

    I'd like some euros ibuprofeno apotex Merkel has called for the U.S. to clear up the recent allegations, saying it would be unacceptable if bugs were planted in allies' embassies or in European Union facilities and noting that "the Cold War is over. " She also has emphasized the importance of a balance between security and data protection.

    Ответить

Оставить ответ


8 + пять =

Вставить изображение