Вход • Регистрация

Форма авторизации в модальном окне

  • 29 июня 2015 г.
  • Доброго дня! Подскажите как сделать или тыкните носом где смотреть.
    В общем хочу сделать форму авторизации в модальном окне (например как у Диафана). Нужно что-бы не закрывалось окно если данные введены неверно.
    Плиз распишите поподробнее. Не дружу с js совсем.
    • 29 июня 2015 г.
    • вешайте на клик hide/show
      а на само окошко стили повесить position:fixed


      • 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;
    })


    });
  • 30 июня 2015 г.
  • Тоже интересует этот вопрос. Или как вывести ошибку, если сама форма спрятана в модальное окно.
    • 01 июля 2015 г.
    • она просто не скроется форма, там же аяксом ошибка подгружается. А закроется если только нажать на крестик. Можно еще затемнение фона добавить и по нему закрывающий клик добавить
  • 01 июля 2015 г.
  • если очень уж надо, что могу какой-нибудь рабочий файл наварганить. Но сперва сами попробуйте.
    • 01 июля 2015 г.
    • Спасибо, уже помогли.
      • 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>


          Файлы прикрепил

          Вроде бы ничего не забыл
  • 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://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;}
        • 03 июля 2015 г.
        • Цитата
          вот рабочий пример http://www.komfort-son.ru/

          У Вас в этом примере окно закрывается если ввести неправильные данные.
          Нужно что-бы сообщение об ошибке заполнения выводилось в этом же окне.
      • 03 июля 2015 г. , редакция: 03 июля 2015 г.
      • wprosto.ru/uslugi/ (любая внутренняя страница)
        Так и не разобрался ещё
        Всё делаю как Александр написал.
        Но при нажатии на ссылку окно не появляется.
        Может какой-то дополнительный джейКвери плагин нужно подключать?
        • 04 июля 2015 г.
        • на ссылке входа должен висеть id="enter"

          а то что закрывается при ошибке, надо глянуть
  • 06 июля 2015 г.
  • Вот рабочий пример http://serversells.de/
    • 06 июля 2015 г.
    • Очень классный пример! Прям то что я и хочу сделать!
      Вы делаете по той же схеме, (которую описал Александр)?

      З.Ы. Если при входе в личный кабинет ошибиться при вводе, то в окошке появится сообщение об этом, а кнопки вернуться и попробовать ещё раз нету. Неудобно немножко.
    • 07 июля 2015 г.
    • Дмитрий, если не жалко поделитесь темой (сформированной).
      Мне только что бы с окнами разобраться.
      Элементы дизайна обещаю не воровать!! ))

Новости

  • 18 июня
  • В сборке большое обновление demo-шаблона, дополнительная защита от спама, улучшение YML-импорта и еще много важного и интересного.
  • 24 апреля
  • В новой сборке совершили революцию в структурировании кастомизированной информации в шаблонах, добавили авторегистрацию пользователей, усовершенствовали защиту от спама, актуализировали накопительную скидку, а также улучшили производительность и стабильность работы системы.
  • 12 января
  • После выхода сборки 7.1 мы выпустили уже три патча, в каждом из которых улучшаем административную часть сайта. Сборка DIAFAN.CMS 7.1.3 уже доступна к установке. 

Форум