Писать на форуме DIAFAN.CMS могут только зарегистрированные пользователи. Войдите или зарегистрируйтесь.
Форма авторизации в модальном окне
-
- Макс (Maks)
- 12
-
29 июня 2015 г.
-
Доброго дня! Подскажите как сделать или тыкните носом где смотреть.
В общем хочу сделать форму авторизации в модальном окне (например как у Диафана). Нужно что-бы не закрывалось окно если данные введены неверно.
Плиз распишите поподробнее. Не дружу с js совсем. -
-
-
-
29 июня 2015 г.
-
вешайте на клик hide/show
а на само окошко стили повесить position:fixed
-
-
-
-
- Макс (Maks)
- 12
-
29 июня 2015 г.
-
Спасибо конечно за ответ! Но хочется чуточку подробнее.
И Нужно что-бы не закрывалось окно если данные введены неверно. -
-
-
-
-
29 июня 2015 г.
-
Давайте сделаю начало, а аяксовой форму пусть ктонить другой подскажет.
Заменятем registration.view.form.php или делаем новый шаблон с таким содержимымКод
if (!defined('DIAFAN'))
{
include dirname(dirname(dirname(__FILE__))).'/includes/404.php';
}
if (!$result["user"])
{
echo $result["error"];
echo '<div class="block">';echo '<h3><a href="#auth" rel="prettyPhoto">'.$this->diafan->_('Вход на сайт').'</a></h3>';
echo '<div id="auth" style="display:none"><form method="post" action="'.$result["action"].'" class="login">
<input type="hidden" name="action" value="auth">
<input type="text" name="name" placeholder="'.$this->diafan->_('Имя пользователя').'" autocomplete="off">
<input type="password" name="pass" placeholder="'.$this->diafan->_('Пароль').'" autocomplete="off">
<input type="checkbox" id="not_my_computer" name="not_my_computer" value="1">
<label for="not_my_computer">'.$this->diafan->_('Чужой компьютер').'</label>
<input type="submit" value="Войти"><br>';
if (! empty($result["reminding"]))
{
echo '<a href="'.$result["reminding"].'" class="arrow-link black">'.$this->diafan->_('Забыли пароль?').'</a> ';
}
if(! empty($result["registration"]))
{
echo '<a href="'.$result["registration"].'" class="arrow-link black">'.$this->diafan->_('Регистрация').'</a>';
}
echo '</form>';
if(! empty($result["use_loginza"]))
{
$this->diafan->_site->js_view[] = 'http://loginza.ru/js/widget.js';
echo '<br><a href="https://loginza.ru/api/widget?token_url='.urlencode('http://'.$_SERVER['HTTP_HOST'].$_SERVER['REQUEST_URI']).'" class="loginza">
<img src="http://loginza.ru/img/providers/yandex.png" alt="Yandex" title="Yandex">
<img src="http://loginza.ru/img/providers/google.png" alt="Google" title="Google Accounts">
<img src="http://loginza.ru/img/providers/vkontakte.png" alt="Вконтакте" title="Вконтакте">
<img src="http://loginza.ru/img/providers/mailru.png" alt="Mail.ru" title="Mail.ru">
<img src="http://loginza.ru/img/providers/twitter.png" alt="Twitter" title="Twitter">
<img src="http://loginza.ru/img/providers/loginza.png" alt="Loginza" title="Loginza">
<img src="http://loginza.ru/img/providers/myopenid.png" alt="MyOpenID" title="MyOpenID">
<img src="http://loginza.ru/img/providers/openid.png" alt="OpenID" title="OpenID">
<img src="http://loginza.ru/img/providers/webmoney.png" alt="WebMoney" title="WebMoney">
</a><br><br>';
}
echo '</div></div>';
}
else
{
echo '<div class="block profile-block">';
echo '<h3>'.$this->diafan->_('Профиль').'</h3>';
if (!empty($result["avatar"]))
{
echo '<img src="'.BASE_PATH.USERFILES.'/avatar/'.$result["name"].'.png" width="'.$result["avatar_width"].'" height="'.$result["avatar_height"].'" alt="'.$result["fio"].' ('.$result["name"].')" class="avatar profile-hello-avatar">';
}
echo '<div class="profile-hello-text">
'.$this->diafan->_('Здравствуйте').',<br>';
echo $result["fio"];
echo '!
</div>';
echo '<ul class="menu">';
if($result['userpage'])
{
echo '<li><a href="'.$result['userpage'].'">'.$this->diafan->_('Личная страница').'</a></li>';
}
if(! empty($result["usersettings"]))
{
echo '<li><a href="'.$result["usersettings"].'">'.$this->diafan->_('Настройки').'</a></li>';
}
if (!empty($result['messages']))
{
echo '<li><a href="'.$result['messages'].'">'.$result['messages_name'];
if($result['messages_unread'])
{
echo ' (<b>'.$result['messages_unread'].'</b>)';
}
echo '</a></li>';
}
echo '</ul>';
echo '<form action="'.BASE_PATH_HREF.'logout/?'.rand(0, 99999).'" method="POST">
<input type="submit" value="'.$this->diafan->_('Выйти', false).'">
</form>';
echo '</div>';
} -
-
-
-
29 июня 2015 г.
-
HTMLКод
<a href="#" class="lk_btn">Вход в личный кабинет</a>
<div id="lk_fly">
<div><a href="#" class="lk_close">Закрыть</a></div>
<insert name="show_login" module="registration">
</div>
CSSКод#lk_fly {background:#FFF; width:500px; z-index:50; position:fixed; top:70px; left:50%; margin-left:-250px; display:none;}
JSКод$(document).ready(function() {
$(".lk_btn").click(function(){
$("#lk_fly").fadeIn("fast");
return false;
});
$(".lk_close").click(function(){
$("#lk_fly").fadeOut("fast");
return false;
})
});
-
-
Поблагодарили: Валерий Викторович (Sherrlok)
-
-
-
30 июня 2015 г.
-
Тоже интересует этот вопрос. Или как вывести ошибку, если сама форма спрятана в модальное окно.
-
-
-
-
01 июля 2015 г.
-
если очень уж надо, что могу какой-нибудь рабочий файл наварганить. Но сперва сами попробуйте.
-
-
-
-
01 июля 2015 г.
-
Спасибо, уже помогли.
-
-
-
-
01 июля 2015 г.
-
поделитесь
-
-
-
-
02 июля 2015 г. , редакция: 02 июля 2015 г.
-
<div id="login-dp" class="dropdown-menu '.($result["error"] ? 'show' : '').'"> - это слой с выпадающим меню (registration.view.show_login.php).
сss - show{display:block}
пример http://french-m.ru
спасибо Александр (SuperMan) -
-
Поблагодарили: Валерий Викторович (Sherrlok)
-
-
-
- Макс (Maks)
- 12
-
01 июля 2015 г.
-
Поделитесь если всё работает
-
-
-
-
02 июля 2015 г.
-
Это основные рабочие элементы
Код<div id="black" title="Закрыть"></div> <!--Затемнение фона. Так как оно используется и в Купить в один клик и заказать звонок и еще где-то. То было решено вынести его просто в шаблон-->
<insert name="show_login" module="registration" template="fly"> <!--Сама форма-->
<insert name="show_login" module="registration" template="btn"> <!--Это меню. Чтобы если пользователь авторизовался у него там свои кнопки были, типа выход и прочее-->
Саму форму я обычно вставляю после BODY, а Меню формы туда, куда необходимо.
Сам скриптКод<script>
$(document).ready(function() {
$(".enter").click(function(){
$("#enter").fadeIn("2000");
$("#black").fadeIn("1000");
return false;
});
$(".fly .fa-close, #black").click(function(){
$(".fly, #black").fadeOut("slow");
});
});
</script>
Стили (основные рабочие)Код<style>
#black {position:fixed; top:0; left:0; z-index:50000; background:#000; height:100%; width:100%; opacity:0.8; display:none;}
.fly {width:360px; position:fixed; top:50px; left:50%; margin-left:-180px; z-index:50001; display:none;}
.fly .fa-close {color:#FFF; position:absolute; top:25px; right:-20px; cursor:pointer;}
</style>
Файлы прикрепил
Вроде бы ничего не забыл -
-
Поблагодарили: Валерий Викторович (Sherrlok), Александра (Alexa0105)
-
-
-
- Макс (Maks)
- 12
-
01 июля 2015 г.
-
Один хрен ничего не работает.
Не открывается окно при нажатии на ссылку. -
-
-
-
01 июля 2015 г.
-
Где можно посмотреть?
-
-
-
-
01 июля 2015 г.
-
вот рабочий пример http://www.komfort-son.ru/
-
-
-
-
01 июля 2015 г.
-
Александр, подскажите, как сделать такой же слайдер показа превьюшек фото как у Вас в списке?
А то сделал с помощью jcarousellite, и у меня после нажатия на кнопки вправо/влево одновременно у все товаров начинают меняться изображения... А у Вас вижу, все норм. -
-
-
-
01 июля 2015 г.
-
Откопал у Вас там:Код/* Примечание: Вставьте этот скрипт в свой js - файл */
(function ($) {
$(document).ready(function(e) {
/* Настройки Слайдера: */
var mainConfig = new Array();
/* Для каждого слайдера (div-а с классом slider-wrap) необходимо создать новый элемент
массива mainConfig[X], где X - порядковый номер слайдера на странице (по коду,
начиная с нуля).
Если элементов массива больше чем слайдеров, скрипт работает исправно, ошибок не возникает.По умолчанию уже создано 5 элеменов (для 5 слайдеров).
*/
mainConfig[0] = {
hwSlideSpeed: 400, // Скорость анимации смены слайда.
hwTimeOut: 1000000, // Задержка автоматической прокрутки.
hwNeedLinks: true, // true - если нужны ссылки вперёд-назад, false - если не нужны.
hwNeedBullets: true, // true - если нужны кнопки переходна на каждый слайд, иначе - false
hwAutoRotate: true // true - автоматическая прокрутка включена, false - выключена.
}
mainConfig[1] = {
hwSlideSpeed: 400,
hwTimeOut: 1000000,
hwNeedLinks: true,
hwNeedBullets: true,
hwAutoRotate: true
}
< ... >
Идея в общем-то понятная. Но где брать исходники? -
-
-
-
02 июля 2015 г.
-
Сейчас в пследнее время использую вот такой слайдер, он сам настраивается под размеры
http://ruseller.com/lessons.php?id=1942&rub=32 -
-
Поблагодарили: Валерий Викторович (Sherrlok)
-
-
-
02 июля 2015 г.
-
а в том слайдре там надо еще вот этот файл подкрепить http://www.komfort-son.ru/custom/komfortika/js/jquery.timers.js
и стили вроде бы вот эти:
Код
.slider-wrap { /* Оболочка слайдера и кнопок */
width:160px;
height:150px;
position:relative;
z-index:1;
}
.slider-wrap .slider{ /* Оболочка слайдера */
width:160px;height:150px;
position:relative;}
.slider-wrap .slide{ /* Слайд */
width:160px;
height:150px;
overflow:hidden;
}
.sli-links{ /* Кнопки смены слайдов */
margin-top:10px;
text-align:center;
display:none !important;}
.slider-wrap .slide img {min-width:160px; height:auto; min-height:150px; display:block; padding:0 !important; margin:0 !important; width:160px;}
.sli-links .control-slide{
margin:2px;
display:inline-block;
width:16px;
height:16px;
overflow:hidden;
text-indent:-9999px;
background:url(radioBg.png) center bottom no-repeat;}
.sli-links .control-slide:hover{
cursor:pointer;
background-position:center center;}
.sli-links .control-slide.active{
background-position:center top;}
.prewbutton {background:url(../images/arrow_left_small.png) left center no-repeat; width:70px; height:150px; position:absolute; top:0px; left:-1px; z-index:3; cursor:pointer; text-indent:-500px; display:none;overflow:hidden;}
.nextbutton {background:url(../images/arrow_right_small.png) right center no-repeat; width:70px; height:150px; position:absolute; top:0px; right:-1px; z-index:3; cursor:pointer; text-indent:-500px; display:none; overflow:hidden;}
.slider-wrap .prewbutton:hover, .nextbutton:hover{
opacity:1;}
.caption {
display:none;}
.shop_arrow_left {background:#FFf url(../images/arrow_left_small.jpg) 0px 9px no-repeat; width:14px; height:28px; border-radius:0 14px 14px 0; position:absolute; top:61px; left:-1px; z-index:2; cursor:pointer;}
.shop_arrow_right {background:#FFf url(../images/arrow_right_small.jpg) 7px 9px no-repeat; width:14px; height:28px; border-radius:14px 0 0 14px; position:absolute; top:61px; right:-1px; z-index:2; cursor:pointer;} -
-
Поблагодарили: Евгений (mbytez)
-
-
-
- Макс (Maks)
- 12
-
03 июля 2015 г.
-
Цитатавот рабочий пример http://www.komfort-son.ru/
У Вас в этом примере окно закрывается если ввести неправильные данные.
Нужно что-бы сообщение об ошибке заполнения выводилось в этом же окне. -
-
-
-
- Макс (Maks)
- 12
-
03 июля 2015 г. , редакция: 03 июля 2015 г.
-
wprosto.ru/uslugi/ (любая внутренняя страница)
Так и не разобрался ещё
Всё делаю как Александр написал.
Но при нажатии на ссылку окно не появляется.
Может какой-то дополнительный джейКвери плагин нужно подключать? -
-
-
-
06 июля 2015 г.
-
Вот рабочий пример http://serversells.de/
-
-
-
-
- Макс (Maks)
- 12
-
06 июля 2015 г.
-
Очень классный пример! Прям то что я и хочу сделать!
Вы делаете по той же схеме, (которую описал Александр)?
З.Ы. Если при входе в личный кабинет ошибиться при вводе, то в окошке появится сообщение об этом, а кнопки вернуться и попробовать ещё раз нету. Неудобно немножко. -
-
-
-
- Макс (Maks)
- 12
-
07 июля 2015 г.
-
Дмитрий, если не жалко поделитесь темой (сформированной).
Мне только что бы с окнами разобраться.
Элементы дизайна обещаю не воровать!! )) -
-
-
-
-
14 июля 2015 г. , редакция: 14 июля 2015 г.
-
кому интересно вот простой плагин на Jquary для модального окна, в установке прост.
-
-
Поблагодарили: Валерий Викторович (Sherrlok), Михаил (ZzzBep), Евгений (mbytez)
-
-
Новости
-
18 июня
-
В сборке большое обновление demo-шаблона, дополнительная защита от спама, улучшение YML-импорта и еще много важного и интересного.
-
24 апреля
-
В новой сборке совершили революцию в структурировании кастомизированной информации в шаблонах, добавили авторегистрацию пользователей, усовершенствовали защиту от спама, актуализировали накопительную скидку, а также улучшили производительность и стабильность работы системы.
-
12 января
-
После выхода сборки 7.1 мы выпустили уже три патча, в каждом из которых улучшаем административную часть сайта. Сборка DIAFAN.CMS 7.1.3 уже доступна к установке.
Блоги
-
24.04.2024
-
Выпустили новую сборку DIAFAN.CMS 7.1.4.
Блоги
-
12.01.2024
-
В данном руководстве познакомим вас с панелью управления DIAFAN.CMS