Modal Login with jQuery Effects

Hektor · 22. März 2016

Hallo zusammen,

ich habe folgendes Snippet bei mir auf der Seite eingebunden:
Code Snippet Modal Login with jQuery Effects using HTML CSS jQuery | Bootsnipp.com

Hier wird über den Button "Open Login Modal" die Loginmaske aufgerufen! Über diesen lassen sich weitere Forms aufrufen (Kennwortrücksetzung und Registrierung).

Auf meiner Seite habe ich nun zwei Buttons, "login" und "Registrieren" wobei das Login dem Button "Open Login Modal" nahe kommt.

Zu meinem Problem:
Ich möchte über meine Schaltfläche "Registrieren" direkt die richtige Registierungs-Form um die Registrierung aufzurufen.

Also anstatt wie im Snippet mit einem Button gearbeitet wird, zwei buttons (Login und Registrierung).

Über eine Hilfestellung wäre ich sehr dankbar.

Hektor · 23. März 2016

Zusatz: ... das ganze in Verbindung mit Symfony 3 und Twig! Evtl. lässt sich mit twig etwas einrichten?

kkapsner · 23. März 2016

Für die Registrierung brauchst du doch mehr Felder (mindestens die Passwortwiederholung) als für das Login...? Wie soll das über ein einziges Formular gehen?

Hektor · 24. März 2016

Unabhängig von den fehlenden Feldern! Mir geht es darum die richtige Maske aufzurufen, wenn ich die Schaltfläche "Registrieren" auf meiner Seite auslöse!

Im Snippet gibt es nur ein Schaltfläche (Open Login Modal) diese öffnet die "Loginmaske" ! Innerhalb der "Loginmaske" und nur innerhalb... kann ich auf die "Regstriermaske" bzw. "Kennwort-Vergessen-Makse" wechseln.

Wie gesagt habe ich auf meiner Seite zwei Links => Login und Registrieren.

Ich entschuldige mich für die schlechte Beschreibung... versuche mir das Wissen um php, javascript, etc. anzueignen... bin so gesehen neu in dem Bereich

Gruß

kkapsner · 24. März 2016

Du musst in deinem HTML einfach nur einen zweiten Button nach Vorbild des ersten machen... wo ist jetzt genau dein Problem?

Hektor · 29. März 2016

danke für die Rückmeldung!

den Button gibt es ja schon! Nur soll dieser zweite Button nicht das "login Modal" öffnen sondern die Maske für die Registrierung!
Das snippet öffnen ja nur die Maske für das Login, die Loginmaske wiederum bietet die Möglichkeit in die "Registrieren" bzw. "Passwort vergessen" Makse zu gelangen! Diesen Schritt möchte ich überspringen und direkt in die Richtig Makse aus dem Menü heruas.

Gruß

kkapsner · 29. März 2016

Wie sieht denn das HTML für den zweiten Button aus?

Hektor · 29. März 2016

Hi,

Login und Register Buttons:

HTML:

 <!-- login -->
                                <li class="navigation-guest hidden-xs">

                                    <a href="#" class="inLogin" role="button" data-toggle="modal" data-target="#login-modal">
                                        <b class="glyphicon glyphicon-log-in"></b>
                                        Login
                                    </a>

                                </li>
                                <!-- login -->


                                <!-- register -->
                                <li class="navigation-guest hidden-xs">

                                    <a href="#" class="inRegister" role="button" data-toggle="modal" data-target="#login-modal">
                                        <b class="glyphicon glyphicon-check"></b>
                                        Registrieren
                                    </a>

                                </li>
                                <!-- register -->

HTML - Login Makse - on Click erscheint diese:

HTML:

<!-- BEGIN # MODAL LOGIN -->
<div class="modal fade" id="login-modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" style="display: none;">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header" align="center">
                <img class="img-circle" id="img_logo" src="http://bootsnipp.com/img/logo.jpg">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span class="glyphicon glyphicon-remove" aria-hidden="true"></span>
                </button>
            </div>

            <!-- Begin # DIV Form -->
            <div id="div-forms">

                <!-- Begin # Login Form -->
                <form id="login-form" >
                    <div class="modal-body">
                        <div id="div-login-msg">
                            <div id="icon-login-msg" class="glyphicon glyphicon-chevron-right"></div>
                            <span id="text-login-msg">Type your username and password.</span>
                        </div>
                        <input id="login_username" class="form-control" type="text" placeholder="Username (type ERROR for error effect)" required>
                        <input id="login_password" class="form-control" type="password" placeholder="Password" required>
                        <div class="checkbox">
                            <label>
                                <input type="checkbox"> Remember me
                            </label>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <div>
                            <button type="submit" class="btn btn-primary btn-lg btn-block">Login</button>
                        </div>
                        <div>
                            <button id="login_lost_btn" type="button" class="btn btn-link">Lost Password?</button>
                            <button id="login_register_btn" type="button" class="btn btn-link">Register</button>
                        </div>
                    </div>
                </form>
                <!-- End # Login Form -->

                <!-- Begin | Lost Password Form -->
                <form id="lost-form" style="display:none;">
                    <div class="modal-body">
                        <div id="div-lost-msg">
                            <div id="icon-lost-msg" class="glyphicon glyphicon-chevron-right"></div>
                            <span id="text-lost-msg">Type your e-mail.</span>
                        </div>
                        <input id="lost_email" class="form-control" type="text" placeholder="E-Mail (type ERROR for error effect)" required>
                    </div>
                    <div class="modal-footer">
                        <div>
                            <button type="submit" class="btn btn-primary btn-lg btn-block">Send</button>
                        </div>
                        <div>
                            <button id="lost_login_btn" type="button" class="btn btn-link">Log In</button>
                            <button id="lost_register_btn" type="button" class="btn btn-link">Register</button>
                        </div>
                    </div>
                </form>
                <!-- End | Lost Password Form -->

                <!-- Begin | Register Form -->
                <form id="register-form" style="display:none;">
                    <div class="modal-body">
                        <div id="div-register-msg">
                            <div id="icon-register-msg" class="glyphicon glyphicon-chevron-right"></div>
                            <span id="text-register-msg">Register an account.</span>
                        </div>
                        <input id="register_username" class="form-control" type="text" placeholder="Username (type ERROR for error effect)" required>
                        <input id="register_email" class="form-control" type="text" placeholder="E-Mail" required>
                        <input id="register_password" class="form-control" type="password" placeholder="Password" required>
                    </div>
                    <div class="modal-footer">
                        <div>
                            <button type="submit" class="btn btn-primary btn-lg btn-block">Register</button>
                        </div>
                        <div>
                            <button id="register_login_btn" type="button" class="btn btn-link">Log In</button>
                            <button id="register_lost_btn" type="button" class="btn btn-link">Lost Password?</button>
                        </div>
                    </div>
                </form>
                <!-- End | Register Form -->

            </div>
            <!-- End # DIV Form -->

        </div>
    </div>
</div>
<!-- END # MODAL LOGIN -->

Java:

Code:

$(function() {
    
    var $formLogin = $('#login-form');
    var $formLost = $('#lost-form');
    var $formRegister = $('#register-form');
    var $divForms = $('#div-forms');
    var $modalAnimateTime = 300;
    var $msgAnimateTime = 150;
    var $msgShowTime = 2000;

    $("form").submit(function () {
        switch(this.id) {
            case "login-form":
                var $lg_username=$('#login_username').val();
                var $lg_password=$('#login_password').val();
                if ($lg_username == "ERROR") {
                    msgChange($('#div-login-msg'), $('#icon-login-msg'), $('#text-login-msg'), "error", "glyphicon-remove", "Login error");
                } else {
                    msgChange($('#div-login-msg'), $('#icon-login-msg'), $('#text-login-msg'), "success", "glyphicon-ok", "Login OK");
                }
                return false;
                break;
            case "lost-form":
                var $ls_email=$('#lost_email').val();
                if ($ls_email == "ERROR") {
                    msgChange($('#div-lost-msg'), $('#icon-lost-msg'), $('#text-lost-msg'), "error", "glyphicon-remove", "Send error");
                } else {
                    msgChange($('#div-lost-msg'), $('#icon-lost-msg'), $('#text-lost-msg'), "success", "glyphicon-ok", "Send OK");
                }
                return false;
                break;
            case "register-form":
                var $rg_username=$('#register_username').val();
                var $rg_email=$('#register_email').val();
                var $rg_password=$('#register_password').val();
                if ($rg_username == "ERROR") {
                    msgChange($('#div-register-msg'), $('#icon-register-msg'), $('#text-register-msg'), "error", "glyphicon-remove", "Register error");
                } else {
                    msgChange($('#div-register-msg'), $('#icon-register-msg'), $('#text-register-msg'), "success", "glyphicon-ok", "Register OK");
                }
                return false;
                break;
            default:
                return false;
        }
        return false;
    });
    
    $('#login_register_btn').click( function () { modalAnimate($formLogin, $formRegister) });
    $('#register_login_btn').click( function () { modalAnimate($formRegister, $formLogin); });
    $('#login_lost_btn').click( function () { modalAnimate($formLogin, $formLost); });
    $('#lost_login_btn').click( function () { modalAnimate($formLost, $formLogin); });
    $('#lost_register_btn').click( function () { modalAnimate($formLost, $formRegister); });
    $('#register_lost_btn').click( function () { modalAnimate($formRegister, $formLost); });
    
    function modalAnimate ($oldForm, $newForm) {
        var $oldH = $oldForm.height();
        var $newH = $newForm.height();
        $divForms.css("height",$oldH);
        $oldForm.fadeToggle($modalAnimateTime, function(){
            $divForms.animate({height: $newH}, $modalAnimateTime, function(){
                $newForm.fadeToggle($modalAnimateTime);
            });
        });
    }
    
    function msgFade ($msgId, $msgText) {
        $msgId.fadeOut($msgAnimateTime, function() {
            $(this).text($msgText).fadeIn($msgAnimateTime);
        });
    }
    
    function msgChange($divTag, $iconTag, $textTag, $divClass, $iconClass, $msgText) {
        var $msgOld = $divTag.text();
        msgFade($textTag, $msgText);
        $divTag.addClass($divClass);
        $iconTag.removeClass("glyphicon-chevron-right");
        $iconTag.addClass($iconClass + " " + $divClass);
        setTimeout(function() {
            msgFade($textTag, $msgOld);
            $divTag.removeClass($divClass);
            $iconTag.addClass("glyphicon-chevron-right");
            $iconTag.removeClass($iconClass + " " + $divClass);
  		}, $msgShowTime);
    }
});

kkapsner · 29. März 2016

Du könntest mal

Code:

                                    <a class="inRegister" role="button" data-toggle="modal" data-target="#login-modal" onclick="$('#login-modal form').hide();$('#register-form').show()">
                                        <b class="glyphicon glyphicon-check"></b>
                                        Registrieren
                                    </a>

probieren.

Hektor · 30. März 2016

Ich teste mal und berichte! Vielen Dank vorab!

Modal Login with jQuery Effects

Hektor

New member

Hektor

New member

kkapsner

Super Moderator

Hektor

New member

kkapsner

Super Moderator

Hektor

New member

kkapsner

Super Moderator

Hektor

New member

kkapsner

Super Moderator

Hektor

New member