Добрый вечер читатели и пользователи C-DM, сегодня мы с вами будем делать всплывающую форму входа для пользователей uCoz, данная форма входа пользователей была выложена пользователем fahriev на форуме, поэтому для её реализации нам понадобится js плагин Basic Modal Dialog и немного знаний html-css, давайте посмотрим демо.
Шаг 1 - Установим JS:
И так для начала нам следует установить 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="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, для этого вниз страницы перед закрывающим тегом устанавливаем следующий код:
HTML
if($LOGIN_FORM$)?>
<div id="content_vxod" class="basic_content">
$LOGIN_FORM$
</div>
endif?>
а для того чтобы вызвать данное окно, в нужное место страницы установим ссылку:
HTML
if(!$USER_LOGGED_IN$)?> <a href="#" id="okno_vxod">Вход</a>endif?>
Шаг 3 - Установим CSS:
Форма входа почти готова, осталось прописать основные css стили:
CSS-Code
/* Всплывающая форма входа для 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(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;
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(http://ucoz-helper.ucoz.com/form-vhoda/pole_login.png) no-repeat left!important;}
.vp_password {background:#fff url(http://ucoz-helper.ucoz.com/form-vhoda/pole_password.png) no-repeat left!important;}
.vp_login:focus {background:#fff url(http://ucoz-helper.ucoz.com/form-vhoda/pole_login.png) no-repeat left!important;}
.vp_password:focus {background:#fff url(http://ucoz-helper.ucoz.com/form-vhoda/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;}
Вот и всё, форма входа установлена, согласитесь ничего трудного в установки нету!
· 
07:39
