Файлы: 857 Видео: 13 Комментарии: 242 Статьи: 306 Новости: 155 Форум: 39179 Пользователи: 3390 + 0 |Добавить на сайт ...

Новое на форуме Новые статьи Мини профиль
[ Обновленные темы · Новые сообщения · Участники · Правила форума · Поиск · RSS ]
  • Страница 1 из 1
  • 1
MUGEN WORKS - ANIME,CHARACTERS,STAGES,SCREENPACK,LIFEBAR » Технический раздел » Скрипты для uCoz » Всплывающая форма входа для uCoz
Всплывающая форма входа для uCoz
Manoichi
Дата: Понедельник, 15.07.2013, 19:15 | Сообщение # 1


И так для начала нам следует установить js плагин Basic Modal Dialog, для этого вниз страницы перед закрывающим тегом < /body> устанавливаем следующий 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="cv_title"><font class="left">Форма входа</font> <a class="right" href="$REGISTER_LINK$">Регистрация</a></div>  
  <div class="c_vxod">  
  <input class="vxod_pole vp_login" name="user" value="" size="20" maxlength="50" type="text">  
  <input class="vxod_pole vp_password" name="password" size="20" maxlength="15" type="password">  

  <div class="vxod_zapomnit">  
  <input id="rementry" name="rem" value="1" checked="checked" type="checkbox"><label for="rementry"></label><span class="left">Запомнить меня</span>  
  <a class="right" href="$REMINDER_LINK$" >Забыл пароль ?</a>  
  </div>  
   
  <input class="vxod_kn" name="sbm" value="Войти" type="submit">  

  </div>

Теперь нам следует установить основной каркас всплывающего окна с формой входя для uCoz, для этого вниз страницы перед закрывающим тегом < /body> устанавливаем следующий код:
Код
<?if($LOGIN_FORM$)?>  
<div id="content_vxod" class="basic_content">  
$LOGIN_FORM$  
</div>  
<?endif?>

а для того чтобы вызвать данное окно, в нужное место страницы установим ссылку:
Код
<?if($USER_LOGGED_IN$)?><a href="#" id="okno_vxod">Вход</a><?endif?>

Форма входа почти готова, осталось прописать основные css стили:
Код
/* Всплывающая форма входа для uCoz от fahriev  
------------------------------------------*/  
#simplemodal-container {  
  width:345px;  
  height:250px;  
  background:#f4f4f4;  
  border-radius:5px;  
  border: 1px solid #e1e1e1;  
}  

/* Тёмный фон при открытии окна*/  
#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(close.png) no-repeat;  
}  

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

.basic_content {  
  display:none;  
}  

.cv_title {  
  float:left;  
  text-align: left;  
  width:305px;  
  padding-bottom: 5px;  
  margin: 20px 20px 0px 20px;  
  border-radius:5px 5px 0px 0px;  
  border-bottom: 1px solid #ddd;  
   
  font:12px Verdana,Arial,sans-serif;  
  text-shadow: 1px 1px 1px #fff;  
  color:#555;  
}  

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

/* Основа формы входа  
------------------------------------------*/  
.c_vxod,  
.c_vxod input{  
  font:11px Verdana,Arial,Helvetica, sans-serif;  
  text-align: left;  
}  

.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 {  
float: left;  
outline: none;  
width: 305px!important;  
height: 35px !important;  
margin: 0px 0px 10px 0px;  
border: 1px solid #ddd!important;  
padding: 7px 10px 7px 35px!important;  
border-radius: 5px;  
color: #777!important;  
font-weight: bold!important;  
}  
   
.vxod_pole:focus {box-shadow:inset 0px 0px 3px #ccc!important;}  
   
.vp_login {background:#fff url(pole_login.png) no-repeat left!important;}  
.vp_password {background:#fff url(pole_password.png) no-repeat left!important;}  
   
.vp_login:focus {background:#fff url(/img/pole_login.png) no-repeat left!important;}  
.vp_password:focus {background:#fff url(/img/pole_password.png) no-repeat left!important;}  
   
.vxod_zapomnit {  
  float:left;  
  width:100%;  
  margin-top: 5px;  
}  
   
.vxod_zapomnit input {  
  float:left;  
  margin: 1px 10px 0px 0px;  
}  

.cv_title a,  
.vxod_zapomnit a {  
  font-weight:bold!important;  
}  

.left {float: left;}  
.right {float: right;}  

/* Кнопка входа  
------------------------------------------*/  
.vxod_kn {  
  float:left;  
  text-align: center !important;  
  width:100%;  
  cursor:pointer;  
  margin-top: 15px;  

  padding: 5px 20px 5px 20px!important;  
  border:1px solid #467A9F!important;  
  background: #47719f!important;  
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #47719f), color-stop(1, #5d82aa))!important;  
  background: -moz-linear-gradient(top, #47719f 1%, #5d82aa 100%)!important;  
  background: -o-linear-gradient(#47719f, #5d82aa)!important;  
  border-radius:3px;  
   
  font:13px Verdana,Arial,Helvetica, sans-serif!important;  
  text-shadow:1px 1px 1px #467A9F!important;  
  font-weight: bold!important;  
  color:#fff!important;  
}  

.vxod_kn:active {box-shadow:inset 0px 0px 3px #326092!important;}  
.vxod_kn:hover {background:#6e92b8!important;}
MUGEN WORKS - ANIME,CHARACTERS,STAGES,SCREENPACK,LIFEBAR » Технический раздел » Скрипты для uCoz » Всплывающая форма входа для uCoz
  • Страница 1 из 1
  • 1
Поиск: