Регистрация    Войти
Авторизация

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

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

Всплывающая форма входа для локальных пользователей uCoz. Всем доброго дня, сегодня я предлагаю всплывающую форму входа для локальных пользователей 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, для этого заходим в Админ панель => Дизайн => Управление дизайном => Пользователи => Форма входа пользователей

удаляем старый код и устанавливаем новый:

$ERROR$


Логин:

Пароль:







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

На этом всё, спасибо за внимание!

Есть вопросы по шаблону или скрипту? так задай их и мы ответим!

Автор: chestr  13-01-2013, 00:20   Просмотров: 4953   

Источник новости: center-dm.ru

форма входа, форма входа ucoz, форма входа для локальных пользователей uCoz, форма входа для локальных пользователей, Всплывающая форма входа
Уважаемый посетитель, Вы зашли на сайт как незарегистрированный пользователь. Мы рекомендуем Вам зарегистрироваться либо зайти на сайт под своим именем.

Пользователь offline bek_ab02 2 мая 2014 15:39
Можно для UID пользователей, просто прописать код на ajax окне, и включить старый вид входа на сайт?

          1

Информация
Посетители, находящиеся в группе Гости, не могут оставлять комментарии к данной публикации.