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

694
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 25
Скрипты и модификации для Ucoz 2118
Шаблоны форумов Ucoz 28
Шаблоны сайтов Ucoz 431
Авторство Webo4ki 309
php скрипты для ucoz 57
Графика для uCoz 40
Мини-чат
Последние комментарии
  • Marishka написал:
  • Радио не стоит на месте новая версия вам 1.5:
    Что нового:
    1. Media Session - позволит вам переключать из бара браузера радио, а также на блоке экрана.
    2. Новые радиостанции.
    3. Новый API код.

    Демо: fiddle
    Реальная полная версия: woobl
  • Marishka написал:
  • Можете добавить свои input поля, но сохраняйте их порядок в html для правильного сохранения и вывода.
  • Marishka написал:
  • Новая версия 1.3 (+6 новых станций):
    Установка:
    Демо: Перейти
  • Marishka написал:
  • Доп 8 станций:
    Код
    <div class="mSt"><p>Tropical</p><div data="2/trop_64">64</div><br><div data="2/trop_128">128</div><br><div data="2/trop_320">320</div></div>  
      <div class="mSt"><p>Нафталин FM</p><div data="2/naft_64">64</div><br><div data="2/naft_128">128</div><br><div data="2/naft_320">320</div></div>  
      <div class="mSt"><p>Rave FM</p><div data="2/rave_64">64</div><br><div data="2/rave_128">128</div><br><div data="2/rave_320">320</div></div>  
      <div class="mSt"><p>Gold</p><div data="2/gold_64">64</div><br><div data="2/gold_128">128</div><br><div data="2/gold_320">320</div></div>  
      <div class="mSt"><p>GOA/PSY</p><div data="2/goa_64">64</div><br><div data="2/goa_128">128</div><br><div data="2/goa_320">320</div></div>  
      <div class="mSt"><p>Minimal/Tech</p><div data="2/mini_64">64</div><br><div data="2/mini_128">128</div><br><div data="2/mini_320">320</div></div>  
      <div class="mSt"><p>House</p><div data="2/fut_64">64</div><br><div data="2/fut_128">128</div><br><div data="2/fut_320">320</div></div>  
      <div class="mSt"><p>Megamix</p><div data="2/mix_64">64</div><br><div data="2/mix_128">128</div><br><div data="2/mix_320">320</div></div>


    Fix работы радио:
    Находим: if(radUrl=="tm" || radUrl=="ps" || radUrl=="teo" || radUrl=="dc")
    Меняем на: if (radUrl == "tm" || radUrl == "ps" || radUrl == "teo" || radUrl == "dc" || radUrl == "gop")
  • CbIPoK2513 написал:
  • Мой вариант выдаёт аватарку картинкой, а не текстом.
    Последние темы
    Опрос
    470
    А
    Р
    Оцените новый дизай:)
    Статистика
    Анализ интернет сайта
    0
    онлайн
    0
    наших
    0
    чужих
    Онлайн всего: 1
    Гостей: 1
    Пользователей: 0
    0
    Сегодня были
    Топ пользователей: