Оценки читателей
0 Лайк 0 Лавки 0 Ахахах! 0 Ого! 0 Восторг 0 Печаль 0 Грусняшь
Приветствуем Вас на сайте!
Авторизировавшись на сайте Вы получаете возможность заказывать эксклюзивные вещи для Вашего сайта, скачивать новинки, общаться с друзьями.
Если у Вас ещё нет аккаунта на BEST STUDIO, вы можете создать его потратив не более 10-ти секунд используя форму справа с заголовком "Вход на сайт"
Если у Вас ещё нет аккаунта на BEST STUDIO, вы можете создать его потратив не более 10-ти секунд используя форму справа с заголовком "Вход на сайт"
Вход на сайт
Логин:
Пароль:
Вход
Войти по Логину и Паролю
О нас
Cтудия скриптов и дизайна BEST STUDIO, как студия перспективных веб-разработок, была основана 1 июля 2009 г. Уже более 17000 зарегистрированых пользователей! С момента ее создания мы четко придерживаемся принципа: «Быстро, качествено, дорого».
Заказывая работу для вашего сайта у нас, вы экономите время...
Заказывая работу для вашего сайта у нас, вы экономите время...
Стремитесь к лучшему - в Best Studio!
Войти | Зарегистрироваться
Настройки
Перезагрузите страницу
- Главная
- Авторские работы
- Другие модули
- Всплывающия панель входа.
DEMO
+
Всем привет многие заметили что на facebook есть при прокрутке страницы всплывающия панель для входа или регистрации на сайте, по мере опускания вниз сайта данная панель закрывает весь сайт.
Установка:
1. Где хотим вывести панель:
2. Добавим в CSS стили:
3. Добавим js скрипт:
При копировании материала указывать источник uCodes.ru либо MyBestStudio.ru
Установка:
1. Где хотим вывести панель:
Код
<?if($USER_LOGGED_IN$)?><?else?>
<div id="uCodes-rEg"><div id="uCodes-rDel">x</div>
<div style="padding-top: 50px;">
<div class="uCodes-cEnter">
<div class="uCodes-nAme uC1">Cтудия скриптов и дизайна <b>BEST STUDIO</b>, как студия перспективных веб-разработок.</div>
<div class="uCodes-nAme uC2">Выполните вход или зарегистрируйте на BEST STUDIO уже сегодня.</div>
</div>
<div class="uCodes-cEnter">
<a class="uCodes-u1" href="/index/3">Регистрация</a>
<a class="uCodes-u2" href="$LOGIN_LINK$">Вход</a>
</div>
</div>
</div>
<?endif?>
<div id="uCodes-rEg"><div id="uCodes-rDel">x</div>
<div style="padding-top: 50px;">
<div class="uCodes-cEnter">
<div class="uCodes-nAme uC1">Cтудия скриптов и дизайна <b>BEST STUDIO</b>, как студия перспективных веб-разработок.</div>
<div class="uCodes-nAme uC2">Выполните вход или зарегистрируйте на BEST STUDIO уже сегодня.</div>
</div>
<div class="uCodes-cEnter">
<a class="uCodes-u1" href="/index/3">Регистрация</a>
<a class="uCodes-u2" href="$LOGIN_LINK$">Вход</a>
</div>
</div>
</div>
<?endif?>
2. Добавим в CSS стили:
Код
div#uCodes-rEg {max-height: 100%;
color: rgba(0, 0, 0, 0.85098);
min-height: 230px;
background: rgba(255, 255, 255, 0.901961);
bottom: -230px;
font-family: helvetica, arial, sans-serif;
font-size: 30px;
font-weight: bold;
left: 0;
line-height: 2;
position: fixed;
right: 0;
text-align: center;
z-index: 999;
}
.uCodes-cEnter {
max-width: 1000px;
margin: 0px auto;text-align: center;
}
.uCodes-nAme {
font-size: 18px;
line-height: 22px;
font-weight: bold;
text-align: center;
margin-bottom: 15px;
margin-top: 4px;
color: rgba(0, 0, 0, 0.85098);
font-family: sans-serif;
}
.uCodes-nAme b {
color: #6BB933;
font-size: 18px;
letter-spacing: -1px;
font-weight: bolder;
}
.uC2 {
font-size: 16px !important;
}
a.uCodes-u1 {
background: #f6f7f8;
background-repeat: repeat-x;
border: 1px solid;
border-radius: 2px;
box-shadow: 0 1px 1px rgba(0, 0, 0, .05);
font-family: helvetica, arial, sans-serif;
font-weight: bold;
position: relative;
text-align: center;
border-color: #cccccc #c5c6c8 #b6b7b9;
color: #4e5665;
text-shadow: 0 1px 0 #fff;
font-size: 14px;top: 40px;
padding: 10px 16px;
}
a.uCodes-u2 {
background: #6bb933;
background-repeat: repeat-x;
border: 1px solid;
border-radius: 2px;
box-shadow: 0 1px 1px rgba(0, 0, 0, .05);
font-family: helvetica, arial, sans-serif;
font-weight: bold;
position: relative;
text-align: center;
border-color: #60a62e #519f18 #409701;
color: #fff;
text-shadow: 0 -1px 0 rgba(0, 0, 0, .2);
font-size: 14px;top: 40px;
padding: 10px 16px;
}
div#uCodes-rDel {
position: absolute;
right: 15px;
top: 10px;
font-weight: bolder;
font-size: 15px;
color: #767B87;
cursor: pointer;
}
div#uCodes-rDel:hover {font-size: 16px;color: #76A3B8;}
color: rgba(0, 0, 0, 0.85098);
min-height: 230px;
background: rgba(255, 255, 255, 0.901961);
bottom: -230px;
font-family: helvetica, arial, sans-serif;
font-size: 30px;
font-weight: bold;
left: 0;
line-height: 2;
position: fixed;
right: 0;
text-align: center;
z-index: 999;
}
.uCodes-cEnter {
max-width: 1000px;
margin: 0px auto;text-align: center;
}
.uCodes-nAme {
font-size: 18px;
line-height: 22px;
font-weight: bold;
text-align: center;
margin-bottom: 15px;
margin-top: 4px;
color: rgba(0, 0, 0, 0.85098);
font-family: sans-serif;
}
.uCodes-nAme b {
color: #6BB933;
font-size: 18px;
letter-spacing: -1px;
font-weight: bolder;
}
.uC2 {
font-size: 16px !important;
}
a.uCodes-u1 {
background: #f6f7f8;
background-repeat: repeat-x;
border: 1px solid;
border-radius: 2px;
box-shadow: 0 1px 1px rgba(0, 0, 0, .05);
font-family: helvetica, arial, sans-serif;
font-weight: bold;
position: relative;
text-align: center;
border-color: #cccccc #c5c6c8 #b6b7b9;
color: #4e5665;
text-shadow: 0 1px 0 #fff;
font-size: 14px;top: 40px;
padding: 10px 16px;
}
a.uCodes-u2 {
background: #6bb933;
background-repeat: repeat-x;
border: 1px solid;
border-radius: 2px;
box-shadow: 0 1px 1px rgba(0, 0, 0, .05);
font-family: helvetica, arial, sans-serif;
font-weight: bold;
position: relative;
text-align: center;
border-color: #60a62e #519f18 #409701;
color: #fff;
text-shadow: 0 -1px 0 rgba(0, 0, 0, .2);
font-size: 14px;top: 40px;
padding: 10px 16px;
}
div#uCodes-rDel {
position: absolute;
right: 15px;
top: 10px;
font-weight: bolder;
font-size: 15px;
color: #767B87;
cursor: pointer;
}
div#uCodes-rDel:hover {font-size: 16px;color: #76A3B8;}
3. Добавим js скрипт:
Код
<script>
$(function(){
$('#uCodes-rDel').click(function () {
$('#uCodes-rEg').remove();
});
$(window).on('scroll',function() {
$('#uCodes-rEg').animate({bottom: '0px'});
var uCodesScroll = $(window).scrollTop() -100;
var uCodesUScroll = $(window).scrollTop() -500;
var UcodesFormat = uCodesScroll+uCodesScroll;
$('#uCodes-rEg').css({height: ''+UcodesFormat+'px'});
});
});
</script>
$(function(){
$('#uCodes-rDel').click(function () {
$('#uCodes-rEg').remove();
});
$(window).on('scroll',function() {
$('#uCodes-rEg').animate({bottom: '0px'});
var uCodesScroll = $(window).scrollTop() -100;
var uCodesUScroll = $(window).scrollTop() -500;
var UcodesFormat = uCodesScroll+uCodesScroll;
$('#uCodes-rEg').css({height: ''+UcodesFormat+'px'});
});
});
</script>
При копировании материала указывать источник uCodes.ru либо MyBestStudio.ru
Данный раздел авторский все работы являются собственностью ucods.3dn.ru любое коммерческое использование строго запрещено.
При копировании материала указываем источник ucods.3dn.ru
Для редактирования кода необходимо иметь хотя бы базовые знания в HTML, CSS и Js технологиях.
При копировании материала указываем источник ucods.3dn.ru
Для редактирования кода необходимо иметь хотя бы базовые знания в HTML, CSS и Js технологиях.
Добавил: Best_Studio
Дата добавления: 13.02.2016 в 14:48 по МСК
Категория: Другие модули
Просмотров: 1019
Комментариев: 0
Эмоций:
Дата добавления: 13.02.2016 в 14:48 по МСК
Категория: Другие модули
Просмотров: 1019
Комментариев: 0
Эмоций:
Теги: