Войти на сайт Регистрация
Добавить файлВ каталоге: 678
Всплывающий вход для локальных пользователей uCoz
15.11.2018
Всплывающий вход для локальных пользователей uCoz
  • 635 Просмотров:
  • 0 Скачиваний:
  • 0 Комментариев:
  • 0.0 Рейтинг:
  • (Голосов: 0)
Описание:
Красивая всплывающая форма входа для локальных пользователей uCoz. Красивая форма для локальных пользователей выполнена в сером цвете. Справа сверху есть соответствующим крестиком для закрытия формы.

Шаг 1 - Установим JS:
Устанавливаем плагин Basic Modal Dialog, для этого вниз страницы перед закрывающим тегом устанавливаем следующий js:

Код
<script type="text/javascript" src="/js/simplemodal.js"></script>


Шаг 2 - Установим HTML:
Теперь давайте установим html каркас формы входа для uCoz, для этого заходим в Админ панель => Дизайн => Управление дизайном => Пользователи => Форма входа пользователей и устанавливаем новый код:

Код
<?if($ERROR$)?><div class="vxod_error">$ERROR$</div><?endif?>
<div class="vxod_name">Логин:</div><input class="vxod_pole" name="user" value="" size="20" maxlength="50" type="text">
<div class="vxod_name">Пароль:</div><input class="vxod_pole" name="password" size="20" maxlength="15" type="password">

<div class="vxod_zapomnit"><input id="rem$PAGE_ID$" type="checkbox" name="rem" value="1" checked="checked"/><label for="rem$PAGE_ID$">запомнить</label> </div>
<input class="vxod_kn" name="sbm" value="Войти" type="submit">

<div class="vxod_niz">
<a href="$REMINDER_LINK$">Забыл пароль</a> | <a href="$REGISTER_LINK$">Регистрация</a>
  </div>


Теперь установим каркас всплывающего окна, для этого вниз страницы перед закрывающим тегом устанавливаем html код:

Код
<?if($LOGIN_FORM$)?>
  <div id="content_vxod" class="basic_content">
<div class="cv_title">Форма входа</div>
<div class="c_vxod">
$LOGIN_FORM$
</div>
  </div>
  <?endif?>


а для того чтобы вызвать данное окно, установим ссылку:

Код
<?if($USER_LOGGED_IN$)?><a href="#" id="okno_vxod">Вход</a><?endif?>


Шаг 3 - Установим CSS:

И в завершении данного решения, пропишем css стили:

Код
/* Всплывающая форма входа для uCoz №2
  ------------------------------------------*/
  #simplemodal-container {
width:400px;
height:250px;
background:#e7e7e7;
border-radius:5px;
  }
Код
/* Тёмный фон при открытии окна*/
  #simplemodal-overlay {
cursor:wait;
background:#000;
  }
Код
#simplemodal-container a.modalCloseImg {
top:-11px;
right:-11px;
width:23px;
height:23px;
z-index:3200;
display:inline;
cursor:pointer;
position:absolute;
background:url(/img/close.png) no-repeat;
  }

  #simplemodal-container a.modalCloseImg:hover {
background-position:0 -23px!important;
  }

  .basic_content {
display:none;
  }

  .cv_title {
float:left;
width:360px;
height:32px;
border-top: 1px solid #d6e870;
background:url(/img/cv_title.png) repeat;
margin-bottom: 10px;
padding: 8px 20px 0px 20px;
font:125%/1.5 Verdana,Arial,sans-serif; color:#4e6400;
text-shadow: 1px 1px 1px #e6f29e; font-weight:700;
border-radius:5px 5px 0px 0px;
  }

  .c_vxod {
float:left;
width:280px;
margin: 20px 60px 0px 60px;
  }
Код
.c_vxod,
  .c_vxod input{
font:11px Verdana,Arial,Helvetica, sans-serif;
  }

  .vxod_error{
float:left;
width:100%;
color:red;
margin-bottom: 10px;
text-align:center;
font-weight: bold;
  }

  .vxod_name {
width:50px;
height:15px!important;
padding: 7px 20px 7px 0px;
color:#7b7b7b; text-shadow: 1px 1px 1px #FFF; font-weight: bold;
  }

  .vxod_pole {
outline:none;
color:#FFF!important;
width:187px!important;
height:15px!important;
text-shadow: 1px 1px 1px #9e9e9e!important;
background:#b0b0b0!important;
border: 1px solid #9e9e9e!important;
border-bottom: 1px solid #fff!important;
padding: 7px 10px 7px 10px!important;
box-shadow:inset 0px 0px 3px #797979!important;
border-radius:3px;
  }

  .vxod_name,
  .vxod_pole {
float:left;
margin: 0px 0px 10px 0px;
font-weight: bold;
  }

  .vxod_pole:focus {
background:#bababa!important;
  }

  .vxod_zapomnit {
float:left;
margin-top: 5px;
  }

  .vxod_niz {
float:left;
width:100%;
color:#bcbcbc;
text-align:center;
font-weight: bold;
padding-top: 5px;
margin-top: 10px;
border-top: 1px solid #bcbcbc;
  }
Код
.vxod_kn {
float:right;
cursor:pointer;
padding: 5px 20px 5px 20px!important;
border:1px solid #467A9F!important;
color:#fff!important; text-shadow:1px 1px 1px #467A9F!important; font-weight: bold!important;
background: #9aeb56!important;
background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #57A8D5), color-stop(1, #3082B1))!important;
background: -moz-linear-gradient(top, #57A8D5 1%, #3082B1 100%)!important;
background: -o-linear-gradient(#57A8D5, #3082B1)!important;
border-radius:3px;
  }

  .vxod_kn:active {
box-shadow:inset 0px 0px 3px #1c638b!important;
  }

  .vxod_kn:hover {
background:#6eb2d8!important;
  }


Напоминаю, что системная переменная отвечающая за отражение формы входа uCoz, должна быть прописана на странице сайта один раз, в противном случаи данное решение не будет работать!

Не забываем скачать архив и залить файлы на свой сайт.

На этом всё, спасибо за внимание!
Всплывающий вход для локальных пользователей uCoz" title="Скачать Всплывающий вход для локальных пользователей uCoz бесплатно, без смс и регистрации" target="_blank">Сервер Скачать файл
Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]