Всплывающий вход для локальных пользователей uCoz
устанавливаем следующий js:
Код
<script type="text/javascript" src="web-mas.ru/demo/vxod/js/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>
Теперь установим каркас всплывающего окна, для этого вниз страницы перед закрывающим тегом устанавливаем html код: 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?>
а для того чтобы вызвать данное окно, установим ссылку:
Код
<?if($USER_LOGGED_IN$)?><a href="#" id="okno_vxod">Вход</a><?endif?>
Шаг 2 - Установим CSS: И в завершении данного решения, пропишем css стили:
Код
/* Всплывающая форма входа для uCoz №2 ------------------------------------------*/ #simplemodal-container { width:400px; height:250px; background:#e7e7e7; border-radius:5px; } /* Тёмный фон при открытии окна*/ #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://web-mas.ru/demo/vxod/img/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:32px; border-top: 1px solid #d6e870; background:url(http://web-mas.ru/demo/vxod/img/cv_title.png) repeat; margin-bottom: 10px; padding: 8px 20px 0px 20px; font:125%/1.5 Verdana,Arial,sans-serif; color:#4e6400; text-shadow: 1px 1px 1px #e6f29e; font-weight:700; border-radius:5px 5px 0px 0px; } .c_vxod { float:left; width:280px; margin: 20px 60px 0px 60px; } /* Основа формы входа ------------------------------------------*/ .c_vxod, .c_vxod input{ font:11px Verdana,Arial,Helvetica, sans-serif; } .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 { outline:none; color:#FFF!important; width:187px!important; height:15px!important; text-shadow: 1px 1px 1px #9e9e9e!important; background:#b0b0b0!important; border: 1px solid #9e9e9e!important; border-bottom: 1px solid #fff!important; padding: 7px 10px 7px 10px!important; box-shadow:inset 0px 0px 3px #797979!important; border-radius:3px; } .vxod_name, .vxod_pole { float:left; margin: 0px 0px 10px 0px; font-weight: bold; } .vxod_pole:focus { background:#bababa!important; } .vxod_zapomnit { float:left; margin-top: 5px; } .vxod_niz { float:left; width:100%; color:#bcbcbc; text-align:center; font-weight: bold; padding-top: 5px; margin-top: 10px; border-top: 1px solid #bcbcbc; } /* Кнопка входа ------------------------------------------*/ .vxod_kn { float:right; cursor:pointer; padding: 5px 20px 5px 20px!important; border:1px solid #467A9F!important; color:#fff!important; text-shadow:1px 1px 1px #467A9F!important; font-weight: bold!important; background: #9aeb56!important; background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #57A8D5), color-stop(1, #3082B1))!important; background: -moz-linear-gradient(top, #57A8D5 1%, #3082B1 100%)!important; background: -o-linear-gradient(#57A8D5, #3082B1)!important; border-radius:3px; } .vxod_kn:active { box-shadow:inset 0px 0px 3px #1c638b!important; } .vxod_kn:hover { background:#6eb2d8!important; }
Напоминаю, что системная переменная отвечающая за отражение формы входа uCoz, должна быть прописана на странице сайта один раз, в противном случаи данное решение не будет работать!
Поделись ссылкой с друзьями:
12.03.2014, 22:47
Категория: Ucoz | Добавил: туссин
| Теги: вход , окно , login , логин
Просмотров: 1131 | Загрузок: 0
| Рейтинг: 5.0 /1
1
Свернуть
Развернуть чат
0