• DONATE to NULLED!
    Форуму и его команде можно помочь, мотивировать модераторов разделов.
    Помогите модератору этого раздела killoff лично.

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

Anisun

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

Вот пример:
Для просмотра ссылки Войди или Зарегистрируйся

Очень буду признательн
 
Правильно или нет понял, вот само окно

Код:
<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 KB · Просмотры: 6
Последнее редактирование модератором:
Можно несколько 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>
 
Назад
Сверху