Fancy Login screenshot


Fancy Login adds JavaScript based, lightbox-style login functionality to your site. When the user clicks on any link that links to /user/login, they screen dims and a login box is created in the center of the screen.


Installation is as simple as installing the module. After it is installed, any anchor tag (<a>) that goes to the URL user/login will automatically be enabled with the Fancy Login functionality. A block is also provided (though disabled upon installation) that contains such a link. This can be used to replace the current login block that ships with Drupal. This block will not appear when a user is signed in. You can also add links to anywhere on your page, using any method, as as long as the destination is user/login, the link will be ajaxified.

Progressive Enhancement

Fancy Login is set up so that the popup is opened when any link that goes to the login page is clicked. If the user doesn't have JavaScript enabled, is on a browser that doesn't support JavaScript, or is on a page where another module's JavaScript has crashed all JavaScript on the page, they are taken to the login page, meaning that no functionality is lost, and they can sign in on this page.

Browser Compatibility

This module should work on any modern browser.

Integration with Other Modules

This module should integrate normally with any module that alters the user_login_block form (the form provided in the normal user_login_block). However modules that use redirects in hook_user_login() are not compatible with this module, as this method of redirection disrupts the AJAX login process by redirecting before the form submission is complete, breaking this module.

Known incompatibilities

  • Rules module - a redirect performed upon user login is incompatible with Fancy Login
  • Core Trigger module - a redirect performed on the 'After a user has logged in' trigger is incompatible with Fancy Login
  • Legal module - this module will not work with Fancy Login

Inclusion and Exclusion classes

  • Inclusion: Any element on the page with a class of .fancy_login_show_popup will show the popup when clicked.
  • Exclusion: Any element that would normally show the popup that has a class of .fancy_login_disable will now not show the popup.

Note that exclusion takes precedence over inclusion, so if an element has both classes, the popup will not show when that element is clicked.


The login window can be brought up using ctrl + . (period). Theoretically this means that all login links could be removed from the page altogether, and users would use this hotkey when visiting the site in order to login. However, this would result in a loss of the progressive enhancement mentioned earlier.


Some of the Fancy Login CSS is inserted inline using javascript. As a result, these settings cannot be overridden in your theme directory (inline CSS always takes precedence over stylesheets). These styles can be set on the admin page at admin/config/people/fancy_login

All other styles can be overridden in the CSS of your site theme

SSL (Secure Login)

This module supports secure login on non-SSL pages Please check the settings page for the relevant settings. Servers must have SSL enabled to be able to use this feature. An optional themeable icon can be added to the HTML above or below the form. The html for the form can be overridden by creating the file ssl-icon.tpl.php in your theme directory, and inserting whatever HTML you want there.

Note that if your site is full SSL, you do not need to enable this setting, and in fact, should not.


Fancy Login was built by Jaypan. We are a development agency specializing in AJAX heavy applications.

Project Information