Каталог файлов

Рейтинг:5.0
Категория: Скрипты для Ucoz
 


Красивая форма входа для локальных пользователей в великолепном дизайне + ко всему этому она ещё и всплывающая

Всплывающая форма входа для локальных пользователей uCoz 263 | (18)
Всем доброго дня, сегодня я предлагаю всплывающую форму входа для локальных пользователей uCoz и в этом мне поможет js плагин Basic Modal Dialog, немного знаний html-css, смотрим демо.

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

Код
<script type="text/javascript" src="http://www.center-dm.ru/ucoz/forma_vxoda/4/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>

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


Шаг 2 - Установим CSS:
Отлично, теперь следует прописать 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, иначе данное решение будет оповещать вас о неправильно введённом логине или пароле, несмотря на то, что вы вводите их правильно.

На этом всё, спасибо за внимание!
 
 
 
Источник: http://www.center-dm.ru/
 
 0 комментариев  1140 просмотров  дата: 28.03.2024  автор: admin  загрузок: 50
 
 
Советую взглянуть:
  • Шаблон DoubleGame для uCoz от Uc-Portaller.Ru
  • Шаблон GoodDate для uCoz от Uc-Portaller.Ru
  • Аудиозаписи v.2
  • Эффект прозрачности изображения
  •  
     
    Всего комментариев: 0
    Добавлять комментарии могут только зарегистрированные пользователи.
    Регистрация | Вход

    Меню сайта

    Мини чат

    Последние комментарии


    Опрос сайта

    Что лучше?
    Всего ответов: 28

    Статистика

    Кол-во зареганных: 2908 (+0)
    Онлайн всего: 1
    Гостей: 1
    Пользователей: 0
    Сейчас на сайте:

    Нас посетили: