Всем доброго дня, сегодня я предлагаю всплывающую форму входа для локальных пользователей uCoz и в этом мне поможет js плагин Basic Modal Dialog, немного знаний html-css, смотрим демо.
Шаг 1 - Установим JS:
Для начало нам следует установить плагин Basic Modal Dialog, для этого вниз страницы перед закрывающим тегом </body> устанавливаем следующий js:
JS
<script type="text/javascript" src="http://ucoz-helper.ucoz.com/form-vhoda/simplemodal.js"></script>
Шаг 2 - Установим HTML:
Теперь необходимо установить нужный html каркас формы входа для uCoz, для этого заходим в Админ панель => Дизайн => Управление дизайном => Пользователи => Форма входа пользователей
удаляем старый код и устанавливаем новый:
HTML
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, для этого вниз страницы перед закрывающим тегом </body> устанавливаем следующий код:
HTML
if($LOGIN_FORM$)?>
<div id="content_vxod" class="basic_content">
<div class="cv_title">Форма входа</div>
<div class="c_vxod">
$LOGIN_FORM$
</div>
</div>
endif?>
а для того чтобы вызвать данное окно, в нужное место страницы установим ссылку:
HTML
if($USER_LOGGED_IN$)?><a href="#" id="okno_vxod">Вход</a>endif?>
Шаг 2 - Установим CSS:
Отлично, теперь следует прописать css стили для правильного отображение элементов окна и входа для uCoz:
CSS-Code
/* Всплывающая форма входа для 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://ucoz-helper.ucoz.com/form-vhoda/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, иначе данное решение будет оповещать вас о неправильно введённом логине или пароле, несмотря на то, что вы вводите их правильно.
На этом всё, спасибо за внимание!
· 
17:47
