Всплывающия панель входа


Всплывающия панель входа

500
10 из 10
Проголосовало: 9






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

Установка:
1. Заходим Панель Управления ---> Редактор страниц ---> Настройки модуля находим поле ---> Название вашего сайта: и прописываем так текст, который будет отображаться в $SITE_NAME$ и в $HOME_PAGE_LINK$, данный код будет прописан в пункте 2...

2. Где хотим вывести панель, вставляем HTML-код:

Код

<?if($USER_LOGGED_IN$)?><?else?>  
  <div id="uCodes-rEg"><div id="uCodes-rDel">x</div>  
  <div style="padding-top: 50px;">  
  <div class="uCodes-cEnter">  
  <div class="uCodes-nAme uC1">$SITE_NAME$</div>  
  <div class="uCodes-nAme uC2">Выполните вход или зарегистрируйте на $HOME_PAGE_LINK$ уже сегодня.</div>  
  </div>  
  <div class="uCodes-cEnter">  
  <a class="uCodes-u1" href="/index/3">Регистрация</a>  
  <a class="uCodes-u2" href="$LOGIN_LINK$">Вход</a>  
  </div>  
  </div>  
  </div>  
  <?endif?>


2. Панель управления ---> Управление дизайном ---> Общие шаблоны ---> Таблица стилей (CSS), и в самый низ вставляем данный код:
Код

div#uCodes-rEg {max-height: 100%;  
  color: rgba(0, 0, 0, 0.85098);  
  min-height: 230px;  
  background: rgba(255, 255, 255, 0.901961);  
  bottom: -230px;  
  font-family: helvetica, arial, sans-serif;  
  font-size: 30px;  
  font-weight: bold;  
  left: 0;  
  line-height: 2;  
  position: fixed;  
  right: 0;  
  text-align: center;  
  z-index: 999;  
  }  
  .uCodes-cEnter {  
  max-width: 1000px;  
  margin: 0px auto;text-align: center;  
  }  
  .uCodes-nAme {  
  font-size: 18px;  
  line-height: 22px;  
  font-weight: bold;  
  text-align: center;  
  margin-bottom: 15px;  
  margin-top: 4px;  
  color: rgba(0, 0, 0, 0.85098);  
  font-family: sans-serif;  
  }  
  .uCodes-nAme b {  
  color: #6BB933;  
  font-size: 18px;  
  letter-spacing: -1px;  
  font-weight: bolder;  
  }  
  .uC2 {  
  font-size: 16px !important;  
  }  
  a.uCodes-u1 {  
  background: #f6f7f8;  
  background-repeat: repeat-x;  
  border: 1px solid;  
  border-radius: 2px;  
  box-shadow: 0 1px 1px rgba(0, 0, 0, .05);  
  font-family: helvetica, arial, sans-serif;  
  font-weight: bold;  
  position: relative;  
  text-align: center;  
  border-color: #cccccc #c5c6c8 #b6b7b9;  
  color: #4e5665;  
  text-shadow: 0 1px 0 #fff;  
  font-size: 14px;top: 40px;  
  padding: 10px 16px;  
  }  
  a.uCodes-u2 {  
  background: #6bb933;  
  background-repeat: repeat-x;  
  border: 1px solid;  
  border-radius: 2px;  
  box-shadow: 0 1px 1px rgba(0, 0, 0, .05);  
  font-family: helvetica, arial, sans-serif;  
  font-weight: bold;  
  position: relative;  
  text-align: center;  
  border-color: #60a62e #519f18 #409701;  
  color: #fff;  
  text-shadow: 0 -1px 0 rgba(0, 0, 0, .2);  
  font-size: 14px;top: 40px;  
  padding: 10px 16px;  
  }  
  div#uCodes-rDel {  
  position: absolute;  
  right: 15px;  
  top: 10px;  
  font-weight: bolder;  
  font-size: 15px;  
  color: #767B87;  
  cursor: pointer;  
  }  
  div#uCodes-rDel:hover {font-size: 16px;color: #76A3B8;}


4. И не забываем добавить JS-код, там где будет стоять HTML-код:
Код

<script>  
  $(function(){  
  $('#uCodes-rDel').click(function () {  
  $('#uCodes-rEg').remove();  
  });  
  $(window).on('scroll',function() {  
  $('#uCodes-rEg').animate({bottom: '0px'});  
  var uCodesScroll = $(window).scrollTop() -100;  
  var uCodesUScroll = $(window).scrollTop() -500;  
  var UcodesFormat = uCodesScroll+uCodesScroll;  
  $('#uCodes-rEg').css({height: ''+UcodesFormat+'px'});  
  });  
  });  
  </script>
Автор публикации: Загрузка
Загрузка
Marishka, это его n материал
Источник: http://ucodes.ru/
  • Оставить первым комментарий:
Добавлять комментарии могут только зарегистрированные пользователи.
Регистрация | Вход
Меню сайта
Категории
Для помощи создания сайта uCoz 24
Скрипты и модификации для Ucoz 2101
Шаблоны форумов Ucoz 28
Шаблоны сайтов Ucoz 429
Авторство Webo4ki 309
php скрипты для ucoz 57
Графика для uCoz 40
Мини-чат
Последние комментарии
как поставить свою ссылку и логотип
  • Сатурн-1 написал:
  • Похвально.
  • Winston888 написал:
  • Я не говорил что делаю только скрипты. Я делаю шаблоны, скрипты, адаптации с разных движков под ucoz и на оборот + я ещё и сам рисую. В данный момент занимаюсь дизайном для webo4ka сам рисую сам верстаю.
  • Сатурн-1 написал:
  • Заметь, мы делаем почти одну и ту же работу.
    Ты - скрипты, я -шаблон. И каждый делает это бесплатно, НО
    ты делаешь скрипты без шаблона, я делаю шаблон без скриптов (не считая основных).
    Я тоже могу сказать что твои скрипты не идеальны, но не буду т.к. даже не знаю какие из всех существующих твои.
    Поэтому ты не сравнивай скрипты и шаблоны да еще и на Ucoz'e, мы же не на хакатоне каком нибудь.
  • Winston888 написал:
  • Если бы я не добавлял бесплатные адаптации или скрипты бесплатно я бы наверное не стал бы комментировать ваш материал.
    Последние темы
    Опрос
    403
    А
    Р
    Оцените новый дизай:)
    Статистика
    Анализ интернет сайта
    0
    онлайн
    0
    наших
    0
    чужих
    Онлайн всего: 6
    Гостей: 5
    Пользователей: 1
    0
    Сегодня были
    Топ пользователей: