Popup Login View (Bootstrap 3)

dleffler · May 2016

Here's a quick way to add a popup Log In/Out dialog to to a view template

<a class="navbar-link loginpopup" href="{link controller=login action=showlogin}" title="{'Log in to the web site'|gettext}" style="text-decoration: none;">{if $user->isLoggedIn()}{'Log Out'|gettext}{else}{'Log In'|gettext}{/if}</a>
{script unique="dialog-`$__loc->src`" jquery="bootstrap-dialog" bootstrap="modal,transition"}
{literal}
    $('#topnavbar a.loginpopup').click(function(e) {
        BootstrapDialog.show({
            title: e.target.title,
            message: function(dialog) {
                var $message = $('<div></div>');
                var pageToLoad = dialog.getData('pageToLoad');
                $message.load(pageToLoad);
                return $message;
            },
            data: {
                'pageToLoad': EXPONENT.PATH_RELATIVE + "index.php?controller=login&action=showlogin&ajax_action=1"
            }
        });
        e.preventDefault();
    });
{/literal}
{/script}

BJKline · May 2016

I must have done something wrong. I copied that code into a new file located in mytheme/modules/users/views/login/showlogin_popup.tpl

Then in my theme I added: <?php expTheme::module(array("controller"=>"login","action"=>"showlogin","view"=>"showlogin_popup")); ?>

All that got me was link that says Login and it takes me to another page. There's no popup at all.

dleffler · May 2016

Remove the #topnavbar from the first line of the javascript so it is only looking for 'a.loginpopup'. The code above assumes it is within the main menu (#topnavbar) element.

BJKline · May 2016

You got me in the right direction. I ended up copying the showall_Flydown.bootstrap3.tpl into mytheme/modules/navigation/views/navigation/ Then I added the code you gave to it. I added some li tags so the login link looks just like all the other menu items.

Popup Login View (Bootstrap 3)

Comments