Statistiken

Benutzer
2
Beiträge
18
Anzahl Beitragshäufigkeit
35130

Wer ist online

Aktuell sind 25 Gäste und keine Mitglieder online

Eigene Inhalte Logo

Eigene Inhalte Info

Diese Web-Präsentation ist zu Testzwecken mit Joomla! 3.x, Bootstrap 2 und eigenem JavaScript installiert. Sie soll aufzeigen was mit Joomla! 3.x und Bootstrap 2 möglich ist, evtl. Fehler aufzeigen, und helfen dafür Lösungen zu finden. Es ist eine reine Demoseite und dient ausschließlich zur Veranschaulichung.

Login über Modal

Ein Login über das Modal von Bootstrap realisieren, bedarf ein wenig Javascript und HTML in der index.php. Auskommentiert in der JS ist eine zusätzliche Klasse für die ID #logContainer, die bei bedarf herangezogen werden kann (kommetierung // löschen).

Beispiel siehe oben rechts zweites Login. Erstes Login ist ein Dropdown Button in der Navbar und hat mit diesem Beitrag nichts zu tun (Es ist nur ein weiteres Beispiel für ein Login).

HTML

 <?php if($this->countModules('login')) : ?>

    <!-- BUTTON MODAL -->
    <div id="logContainer">
        <span class="modalLogOpen"><a href="#logModal" class="btn" data-toggle="modal" role="button">Login <i class="icon-user"></i></a></span>
        <span class="modalLogClose"><a href="#logModal" class="btn btn-danger" data-toggle="modal" role="button">Logout <i class="icon-remove"></i></a></span>
    </div>
    
    <!-- Container MODAL -->
    <div id="logModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="logModalLabel" aria-hidden="true">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
        <h3 id="logModalLabel">Login / Logout</h3>
        </div>
        <div class="modal-body">
            <jdoc:include type="modules" name="login" style=" " />
        </div>
        <div class="modal-footer">
            <button class="btn btn-small" data-dismiss="modal" aria-hidden="true">Abbruch</button>
        </div>
    </div>

<?php endif; ?>

CSS

 Wird über die Class des Framework Bootstrap gesteuert.

Javascript

(function($){

$(document).ready(function() {
    
    //var logContainer = 'div#logContainer';
    //var classLogin = 'modalLogin';
    //var classLogout = 'modalLogout';
    var loginForm = '#login-form div';
    var loginNo = 'userdata';
    var loginYes = 'login-greeting';
    var modalOpen = 'span.modalLogOpen';
    var modalClose = 'span.modalLogClose';

    //$(logContainer).addClass(classLogin);

    if($(loginForm).hasClass(loginNo) ) {
        //$(logContainer).addClass(classLogin);
        //$(logContainer).removeClass(classLogout);
        $(modalOpen).css ({
            display: 'block',
        });
        $(modalClose).css ({
            display: 'none',
        });
    };

    if($(loginForm).hasClass(loginYes) ) {
       //$(logContainer).addClass(classLogout);
        //$(logContainer).removeClass(classLogin);
       $(modalOpen).css ({
            display: 'none',
        });
       $(modalClose).css ({
            display: 'block',
        });
    };
});

})(jQuery);

ScreenShot

Modal Button

Kommentar schreiben

Bitte habt dafür Verständnis, dass erst nach Sichtung der Einträge eure Einträge freigestellt werden, und auch erst dann sichtbar für alle sind.


Sicherheitscode
Aktualisieren