Помощь Как сделать форму входа, регистрации и восстановление пароля в одном модальном окне?

Тема в разделе "DLE", создана пользователем Anisun, 26 дек 2014.

Информация :
Актуальная версия DataLife Engine 12.0
( Final Release v.12.0 | Скачать DataLife Engine | Скачать 12.0 demo )
Нужно ли обновляться | Как обновиться | Изменения в шаблонах
> Нет русских символов <
[Приватная тема DLE (Все подробности в ЛС к модератору раздела)]

Версии 11.3 и ниже - уязвимы!

Локализации | F.A.Q. | Внешний вид
Правила раздела | Правила форума
Обсуждение хайда карается баном!
В каждом сообщении указывайте версию DLE, которого они касаются!
Модераторы: killoff
  1. Anisun

    Anisun Постоялец

    Регистр.:
    8 дек 2014
    Сообщения:
    65
    Симпатии:
    20
    Здравствуйте подскажите пожалуйста как сделать форму входа, регистрации и восстановление пароля в одном модальном окне?

    Вот пример:
    http://tympanus.net/Tutorials/AnimatedFormSwitching/

    Очень буду признательн
     
  2. mishiko

    mishiko Создатель

    Регистр.:
    5 сен 2011
    Сообщения:
    285
    Симпатии:
    122
  3. Anisun

    Anisun Постоялец

    Регистр.:
    8 дек 2014
    Сообщения:
    65
    Симпатии:
    20
    И что там? такого? Я так понял что нужно писать модуль, чтобы такое сделать, и по другому никак да?
     
  4. mishiko

    mishiko Создатель

    Регистр.:
    5 сен 2011
    Сообщения:
    285
    Симпатии:
    122
    нет просто с помощью тегов выводи вход регистрацию итд... вот с примером http://ruseller.com/lessons.php?rub=32&id=1452
     
    CannabiS нравится это.
  5. Anisun

    Anisun Постоялец

    Регистр.:
    8 дек 2014
    Сообщения:
    65
    Симпатии:
    20
    Правильно или нет понял, вот само окно

    Код:
    <div id="form_wrapper" class="form_wrapper">
                        <form class="register">
                            <h3>Регистрация</h3>
                            <div class="column">
                                <div>
                                    <label>Имя:</label>
                                    <input type="text" />
                                    <span class="error">Это Ошибка</span>
                                </div>
                                <div>
                                    <label>Фамилия:</label>
                                    <input type="text" />
                                    <span class="error">Это Ошибка</span>
                                </div>
                                <div>
                                    <label>Ваш сайт:</label>
                                    <input type="text" value="http://"/>
                                    <span class="error">Это Ошибка</span>
                                </div>
                            </div>
                            <div class="column">
                                <div>
                                    <label>Имя пользователя(ник):</label>
                                    <input type="text"/>
                                    <span class="error">Это Ошибка</span>
                                </div>
                                <div>
                                    <label>Email:</label>
                                    <input type="text" />
                                    <span class="error">Это Ошибка</span>
                                </div>
                                <div>
                                    <label>Пароль:</label>
                                    <input type="password" />
                                    <span class="error">Это Ошибка</span>
                                </div>
                            </div>
                            <div class="bottom">
                                <div class="remember">
                                    <input type="checkbox" />
                                    <span>Получать обновления</span>
                                </div>
                                <input type="submit" value="Регистрация" />
                                <a href="index.html" rel="login" class="linkform">Вы уже зарегестрированы? Перейдите для Входа</a>
                                <div class="clear"></div>
                            </div>
                        </form>
                        <form class="login active">
                            <h3>Вход</h3>
                            <div>
                                <label>Имя пользователя(ник):</label>
                                <input type="text" />
                                <span class="error">Это Ошибка</span>
                            </div>
                            <div>
                                <label>Пароль: <a href="forgot_password.html" rel="forgot_password" class="forgot linkform">Забыли пароль?</a></label>
                                <input type="password" />
                                <span class="error">Это Ошибка</span>
                            </div>
                            <div class="bottom">
                                <div class="remember"><input type="checkbox" /><span>Запомнить пароль</span></div>
                                <input type="submit" value="Войти"></input>
                                <a href="register.html" rel="register" class="linkform">Вы не зарегистрированы? Зарегистрироваться!</a>
                                <div class="clear"></div>
                            </div>
                        </form>
                        <form class="forgot_password">
                            <h3>Вспомнить Все!</h3>
                            <div>
                                <label>Имя пользователя или Email:</label>
                                <input type="text" />
                                <span class="error">Это Ошибка</span>
                            </div>
                            <div class="bottom">
                                <input type="submit" value="Напомнить пароль"></input>
                                <a href="index.html" rel="login" class="linkform">Вспоинили? Перейдите для Входа</a>
                                <a href="register.html" rel="register" class="linkform">Вы не зарегистрированы? Зарегистрироваться!</a>
                                <div class="clear"></div>
                            </div>
                        </form>
                    </div>
                    <div class="clear"></div>
                </div>
    
            </div>
    

    А это скрипт изминения форм

    Код:
            <script type="text/javascript">
                $(function() {
                      
                    var $form_wrapper    = $('#form_wrapper'),
                      
                        $currentForm    = $form_wrapper.children('form.active'),
                      
                        $linkform        = $form_wrapper.find('.linkform');
                                                  
                    $form_wrapper.children('form').each(function(i){
                        var $theForm    = $(this);
                      
                        if(!$theForm.hasClass('active'))
                            $theForm.hide();
                        $theForm.data({
                            width    : $theForm.width(),
                            height    : $theForm.height()
                        });
                    });
                  
                    setWrapperWidth();
                  
                    $linkform.bind('click',function(e){
                        var $link    = $(this);
                        var target    = $link.attr('rel');
                        $currentForm.fadeOut(400,function(){
                          
                            $currentForm.removeClass('active');
                          
                            $currentForm= $form_wrapper.children('form.'+target);
                          
                            $form_wrapper.stop()
                                        .animate({
                                            width    : $currentForm.data('width') + 'px',
                                            height    : $currentForm.data('height') + 'px'
                                        },500,function(){
                                          
                                            $currentForm.addClass('active');
                                          
                                            $currentForm.fadeIn(400);
                                        });
                        });
                        e.preventDefault();
                    });
                  
                    function setWrapperWidth(){
                        $form_wrapper.css({
                            width    : $currentForm.data('width') + 'px',
                            height    : $currentForm.data('height') + 'px'
                        });
                    }
                  
                    $form_wrapper.find('input[type="submit"]')
                                .click(function(e){
                                    e.preventDefault();
                                });  
                });
            </script>
    
    А вот для вызова
    Код:
    <div id="okno" title="" style="display:none; " >
    СОДЕРЖИМОЕ
    </div>
    
    Код:
    <script type="text/javascript">
    function showOkno() {
    $(function(){
    
    $('#okno').dialog({
    autoOpen: true,
    show: 'slide',
    hide: 'slide',
    width: 550,
    buttons: {
    "Закрыть окно" : function() {
    $(this).dialog("close");
    }
    }
    });
    });
    }
    </script>
    Только на деле как это будет работать, чтоб понимались все теги в одном месте вот модуль но быстрой регистрацией в модальном окне, только не пойму почему не работает, может если не трудно объясните,

    версия движка dle 10.1

    в инструкции так


    Установка:

    Код:
    1. Открываем /index.php
    Ищем:
    require_once ROOT_DIR . '/engine/init.php';
    
    
    На следующей строке вставляем:
    require_once ENGINE_DIR . '/modules/mod_reg.php';
    
    
    2. Ищем: 
    $tpl->set ( '{calendar}', $tpl->result['calendar'] );
    
    
    На предыдущей строке вставляем:
    $tpl->set ( '[mod_reg]', $mod_reg );
    $tpl->set ( '[/mod_reg]', $Zmod_reg );
    
    
    3. Вставить код 
    [mod_reg]быстрая регистрация[/mod_reg]
    
    в шаблон main.tpl 
     

    Вложения:

    • mod_reg (3).rar
      Размер файла:
      1,7 КБ
      Просмотров:
      5
    Последнее редактирование модератором: 28 дек 2014
  6. AlgoriVismut

    AlgoriVismut Создатель

    Регистр.:
    10 ноя 2014
    Сообщения:
    11
    Симпатии:
    8
    Можно несколько div'ов сделать. Один показывать:
    HTML:
    <div id="form-1">
        Форма №1<br />
        <button onclick="form('form-2')">Перейти к форме №2</button>
        <button onclick="form('form-3')">Перейти к форме №3</button>
    </div>
    <div id="form-2">
        Форма №2<br />
        <button onclick="form('form-1')">Перейти к форме №1</button>
        <button onclick="form('form-3')">Перейти к форме №3</button>
    </div>
    <div id="form-3">
        Форма №3<br />
        <button onclick="form('form-1')">Перейти к форме №1</button>
        <button onclick="form('form-2')">Перейти к форме №2</button>
    </div>
    <script>
    function form(show){
        $('div[id^="form-"]').hide();
        $(show).show();
    }
    </script>