MyBB Community Forums

1.8 brings a lot of fun new stuff to try out. In this tutorial I'll show you how to quickly make a modal login without including any CSS, and only using minimal Javascript. Also we'll only be making 1 template edit.

First off, huge credit to Euan T., the login form portion of this is built from his tutorial found here: http://community.mybb.com/thread-117646.html

Paste the following into your header_welcomeblock_guest template:

<a href="{$mybb->settings['bburl']}/member.php?action=login" class="open-modal" data-selector="#login-form" rel="modal:open">{$lang->welcome_login}</a> or <a href="{$mybb->settings['bburl']}/member.php?action=register">{$lang->welcome_register}</a>
<div id="login-form" style="display: none;">
  <form method="post" action="member.php">
    <table class="tborder" cellspacing="0">
      <tr>
        <td class="thead" colspan="2">
          <strong>Login at {$mybb->settings['bbname']}</strong>
        </td>
      </tr>
      <tr>
        <td class="trow1">
          <label for="login_username">
            Username:
          </label>
        </td>
        <td class="trow1">
          <input type="text" value="" style="width: 200px;" maxlength="30" size="25" name="username" class="textbox" id="login_username" />
        </td>
      </tr>
      <tr>
        <td class="trow2">
          <label for="login_password">
            Password:
          </label>
        </td>
        <td class="trow2">
          <input type="password" value="" style="width: 200px;" size="25" name="password" class="textbox" id="login_password" />
        </td>
      </tr>
      <tr>
        <td class="tfoot" colspan="2">
          <label class="smalltext" title="If ticked, your login details will be remembered on this computer, otherwise, you will be logged out as soon as you close your browser.">
            <input type="checkbox" value="yes" checked="checked" name="remember" class="checkbox">
            Remember?
          </label>
          
          <input type="submit" value="Login" name="submit" class="button" style="float: right;" />
        </td>
      </tr>
    </table>
    <input type="hidden" value="do_login" name="action" />
    <input type="hidden" value="" name="url" />
  </form>
</div>

<script type="text/javascript">
  $('a.open-modal').click(function(event) {
    var modalSelector = $(this).attr('data-selector');
    event.preventDefault();
    $(modalSelector).modal({
      fadeDuration: 250,
      keepelement: true
    });
    return false;
  });
</script>

And as simple as that you have a fully functional modal login.

[attachment=32087]

The modals can be used for anything you'd like, just change both occurrences of login-form.

Could come handy when updating my plug-ins, thanks!

I was looking for this solution for god knows how long. Thanks, Eric.

Glad it's helpful. ^.^

I'd like to make a tutorial on using Ajax with the modals as well.

Just had a look at how MyBB does it themselves, it's simpler so here it is:

Quote:<a href="{$mybb->settings['bburl']}/member.php?action=login" onclick="$('#login-form').modal({ fadeDuration: 250, keepelement: true }); return false;" class="login">{$lang->welcome_login}</a>

Keep in mind it's basically the same code, just hardcoded into the link.

Working on an Ajax modal tutorial so look for that.

Any tips on how to switch between different modals?

The content of the modal is completely custom. You can put whatever you'd like there.

I know that, I meant how to switch to another modal if you're currently viewing a modal. Sorry if I wasn't clear. Here's my example:

I have a point system for my forum, so I'm using the modal to take the place of a pop up that displays all the points that a user has. Staff have the option to edit those points by clicking an edit link next to the point they want to edit. On 1.6, the popup content would switch to be the edit form. Using the modals, that doesn't happen.

I tried some simple javascript to show/hide the modals based on clicks, but that isn't working either. All of the appropriate tags have the correct IDs, so I'm not sure what the problem is.

<script>
  $("#edit").click(function(){
    $('#firstModal').modal('hide');
    $('#secondModal').modal('show');
});
</script>

Hopefully that clears up what I meant.

Ah, yes I understand what you mean. I'll certainly look into that for you, sounds interesting.

Thanks! I'm looking because I know the reputation modal does something similar, but it's got it's own javascript to fade in/out content. So yeah, just curious to see if that was an option. It would be a nice addition to your tutorial.