Всплывающая форма входа для локальных пользователей 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>


Теперь установим основной каркас,в низ страници перед закрывающим тегом прописываем
Код
<?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, иначе данное решение будет оповещать вас о неправильно введенном логине или пароле, несмотря на то, что вы вводите их правильно. Всплывающая форма входа для локальных пользователей uCoz - Cкрипты для uCoz - Каталог файлов - Все для uCoz, DLE, Joomla, скрипты для uCoz
Z Скачать Всплывающая форма входа для локальных пользователей uCoz

Категория: Cкрипты для uCoz Просмотров: 1709