Всплывающая форма входа для локальных пользователей uCoz


Всплывающая форма входа для локальных пользователей uCoz.

Для начало нам следует установить плагин Basic Modal Dialog, для этого вниз страницы перед закрывающим тегом устанавливаем следующий js:
Код
<script type="text/javascript" src="http://www.center-dm.ru/ucoz/forma_vxoda/4/simplemodal.js"></script>


Теперь необходимо установить нужный 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>


Теперь нам следует установить основной каркас всплывающего окна с формой входя для uCoz, для этого вниз страницы перед закрывающим тегом устанавливаем следующий код:
Код
<?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?>


Отлично, теперь следует прописать css стили для правильного отображение элементов окна и входа для uCoz:
Код
/* Всплывающая форма входа для uCoz  
------------------------------------------*/  
#simplemodal-container {  
  width:400px;  
  height:250px;  
  background:#fff;  
  border:5px solid #A9C24E;  
  -webkit-border-radius:5px; -moz-border-radius:5px; border-radius:5px;  
}  

/* Тёмный фон при открытии окна*/  
#simplemodal-overlay {  
  cursor:wait;  
  background:#000;  
}  

/* Кнопка закрыть вверху окна */  
#simplemodal-container a.modalCloseImg {  
  top:-15px;  
  right:-14px;  
  width:23px;  
  height:23px;  
  z-index:3200;  
  display:inline;  
  cursor:pointer;  
  position:absolute;  
  background:url(http://www.center-dm.ru/ucoz/forma_vxoda/4/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:27px;  
  background:#f2f2f2;  
  margin-bottom: 10px;  
  padding: 8px 20px 0px 20px;  
  border-bottom: 1px solid #e9e9e9;  
  font:125%/1.5 Verdana,Arial,sans-serif; color:#728696; font-weight:700;  
}  

.c_vxod {  
  float:left;  
  width:280px;  
  margin: 20px 60px 0px 60px;  
}  

/* Основа формы входа  
------------------------------------------*/  
.vxod_error{  
  float:left;  
  width:100%;  
  color:red;  
  margin-bottom: 10px;  
  text-align:center;  
  font-weight: bold;  
}  

.vxod_name {  
  width:50px;  
  height:15px;  
  background: #8cd148;  
  padding: 5px 10px 5px 10px;  
  border: 1px solid #7ac035;  
  border-right:none;  
  color:#fff; text-shadow: 1px 1px 1px #427212; font-weight: bold;  
}  

.vxod_pole {  
  outline:none;  
  color:#666!important;  
  width:187px!important;  
  height:15px!important;  
  text-shadow: 1px 1px 1px #fff!important;  
  background:#f9f9f9!important;  
  border: 1px solid #CAD1DB!important;  
  padding: 5px 10px 5px 10px!important;  
}  
   
.vxod_name,  
.vxod_pole {  
  float:left;  
  margin: 0px 0px 10px 0px;  
  font:11px Verdana,Arial,Helvetica, sans-serif; font-weight: bold;  
}  
   
.vxod_pole:focus {  
  box-shadow:inset 0px 0px 3px #ccc!important;  
  -webkit-box-shadow:inset 0px 0px 3px #ccc!important;  
  -moz-box-shadow:inset 0px 0px 3px #ccc!important;  
}  
   
.vxod_zapomnit {  
  float:left;  
  margin-top: 5px;  
}  

.vxod_niz {  
  float:left;  
  width:100%;  
  color:#CAD1DB;  
  text-align:center;  
  font-weight: bold;  
  padding-top: 5px;  
  margin-top: 10px;  
  border-top: 1px solid #CAD1DB;  
}  

/* Зелёная кнопка входа  
------------------------------------------*/  
.vxod_kn {  
  float:right;  
  cursor:pointer;  
  padding: 5px 20px 5px 20px!important;  
  border:1px solid #72b837!important;  
  color:#236114!important; text-shadow:1px 1px 1px #d7ffb6!important;  
  background: #9aeb56!important;  
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #9aeb56), color-stop(1, #7ecb3d))!important;  
  background: -moz-linear-gradient(top, #9aeb56 1%, #7ecb3d 100%)!important;  
  background: -o-linear-gradient(#9aeb56, #7ecb3d)!important;  
}  

.vxod_kn:active {  
  box-shadow:inset 0px 0px 3px #5b9728!important;  
  -webkit-box-shadow:inset 0px 0px 3px #5b9728!important;  
  -moz-box-shadow:inset 0px 0px 3px #5b9728!important;  
}  

.vxod_kn:hover {  
  background:#aff278!important;  
}


Примечание:
Не забудьте удалить старую форму входа uCoz, иначе данное решение будет оповещать вас о неправильно введенном логине или пароле, несмотря на то, что вы вводите их правильно.

Готово.


ИсточникАвтор: RuleZ-DM | Категория: Ucoz-форма входа | Добавил: AID | Дата: 20.01.2013
Скачать Всплывающая форма входа для локальных пользователей uCoz с сервера
2736_Demo_vxod_v_okn.rar Размер: 8.5 Kb (cкачиваний: 151)
Посмотреть демо Всплывающая форма входа для локальных пользователей uCoz
Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]
Хостинг от uCoz