Плавающее окно на CSS.

* 4-03-2014, 08:41 * A_Protasov * Комментариев: 0

Рейтинг:

Плавающее окно на CSS.

Сделать «напоминалку»,  для пользователей о регистрации, разместить важную информацию, установить баннер, именно таковы основные цели «Плавающего окна».  Но самое главное, что данное окно работает, без использования JS скриптов, что не создаёт лишней нагрузки, вашему веб ресурсу. Всё что необходимо, для его создание это, небольшие знания правил CSS и HTML.

На самом деле здесь нет нечего сложного.  Любой созданный вами блок, в тегах <div></div>, или таблица <table></table>, с её атрибутам, имеющее фиксированное позиционирование (position: fixed) и отображение поверх остальных окон, блоков (z-index). И ещё понадобится свойства, для закрытия окна (onclick='document.getElementById("……")..’). А весь остальной дизайн это ваша фантазия.

Окно напоминания пользователю, о регистрации.

К примеру, мы создаём окно напоминающее, пользователю о регистрации, на нашем сайте. Создаём сам блок, правила можно прописать прямо в коде, блока не используя подключения каскадной таблицы.

<div id="banner" style="position:fixed; z-index:10000; top:30px; left:30px; дальше – ширина, высота, бордюр, фон и всё что пожелаете">
</div>

В качестве «id», мы даём любое имя нашему блоку, что бы потом закрыть его. Но это, в самом конце, а пока напишем заголовок и текст:

<h3 style="color: yellow; margin: 0; text-align: center ;"> Уважаемый Гость!</h3>
<p style="margin: 5px; color: #FFF; text-align: center; font-size: 14px">
Вы вошли на наш сайт, как не зарегистрированный пользователь! В связи с этим, многие функции сайта для вас не доступны! Пожалуйста, пройдите простую и несложную регистрацию, после чего вы получите доступ ко всем возможностям пользователя!<br>
<a style="color: yellow;" href=""> Зарегистрироваться! </a>
</p>

Ну, примерно как то так. Вот в принципе блок и готов, осталось только добавить, атрибуты закрытия и его стили.

<a style="position: absolute; top:-10px; right:-10px; width:20px; line-height:20px; border:2px solid yellow; border-radius:100%; color: yellow; background-color: rgba(202,35,32, 0.8); text-align:center; text-decoration: none;" href="#" onclick='document.getElementById("banner").style.left="-9999px"'><b>X</b></a>

Я сделал это так. Внешне получилась круглая кнопочка в правом верхнем углу, с закрывающим крестиком.  И вот ещё один важный момент. По идеи, когда я прошу браузер выполнить команду клика «мышкой» onclick и указываю id (banner) на который ссылаюсь, в стиле выполнения я должен написать  .style.display="none", то есть заставить скрыться наш блок. Но, к сожалению, с января 2014 года, алгоритм роботов индексации Яндекс был сильно обновлён, где не стало исключением использование блока display-none, за которым, по мнению Яндекса веб мастера могут скрывать для пользователя, зловредный код и вредоносное «ПО».  По этому, что бы избежать конфликтов с «псами» Яндекса, предлагаю использовать вот такой вариант:

.style. left="-9999px"

Который забрасывает наш блок за три девять земель, а если быть точнее уносит, в лево на 9999px. При этом всё остаётся работать в штатном режиме, не расширяется, не меняется, а для поисковых роботов, этот блок даже очень и очень видимый.  В общем, у меня получился вот такой блок:

Рисунок №1.

Плавающее окно на CSS.

Установка плавающего окна на DLE.

Данный блок, можно поместить на любой сайт и любую CMS. Также можно указать, для кого именно этот блок предназначен. То есть, например группа №1 это не зарегистрированные пользователи и мы хотим, что бы только они видели это предупреждение, в качестве примера я выбрал движок DLE.

Для этого необходимо, заключить созданный нами код в следующие атрибуты:

[not-group=1]
Здесь наш код pop-banner.
[/not-group]

И сохранить наш документ в расширенииTPL, то есть вот так pop-banner.tpl. Далее заливаем этот файл в наш шаблон, который подключен к движку. Открываем файл main.tpl и в любом месте, например после тега <body> или перед его закрытием </body> пишем:

{include file="pop-banner.tpl"}

Сохраняем, всё это дело переходим к просмотру, корректируем баннер в месте его показа и любуемся проделанной работой.

Хороший совет, по установке плавающего баннера.

Очень важно, что бы вы поняли!  От того что мы пытаемся уговорить пользователя выполнить, то или, иное действие, нечего не изменится, если только он сам этого не захочет. Поэтому надо понять одно! Мы не уговариваем. Мы напоминаем! Навязчивые баннеры раздражают посетителей и пользователей, нам необходимо как можно меньше, мозолить им глаза всякой рекламой, а уж тем более плавающими штучками. А посему предлагаю закрепить этот «напоминатель», только на главной странице, вот таким образом:

[aviable=main]{include file="pop_banner.tpl"}[/aviable]

Также можно прикрепить его к определённому разделу, или новости. Обо всех возможностях просто посмотрите мануал по DLE, или той cms, которую вы используете. В данном примере я закреплю наш баннер, на главной и на той страничке,  где вы сейчас находитесь.

Внимание!!! Для того что бы скачать исходные материалы по данной теме! Необходимо сделать клик по социальной сети в замке ниже, или пройти простую и несложную регистрацию!



razdacha.jpg

Просмотров: 5 643
Последние новости блога
Простая вёрстка в HTML + CSS. Урок №11.
На прошлом занятие мы, ознакомились с тем как переносить стили, с HTML в CSS. Сегодня нам необходимо перенести всё остальное. Мы помним, что для тега  <body> нами был создан
Позиционирование и z-index в CSS. Часть-3.
Всплывающая подсказка. Эффект всплывающей подсказки, с боку изображения, на сегодняшний день очень актуальная тема.  Очень неплохо и солидно, этот трюк смотрится на кино сайтах и интернет
Позиционирование и z-index в CSS. Часть-2.
Накладываем текст на изображение. Если вы разобрались что к чему в предыдущей статье, тогда здесь для вас всё будет значительно проще.  И так нашей целью этого занятия является создать, общий
Уважаемый посетитель, Вы зашли на сайт как незарегистрированный пользователь.
Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.
Информация
Посетители, находящиеся в группе Гости, не могут оставлять комментарии к данной публикации.


Статистика

  • Рейтинг@Mail.ru