Drupal Technical

Drupal Tips: How to display a login form in a popup using Colorbox in Drupal 7

Kiran.kumar | | 1 min read

Do you want to display a login form in a popup? Here is a simple way of displaying the login form in popup using Colorbox in Drupal 7. For this, we need Colorbox module for Drupal 7 installed. Now, follow these steps:

First Step: Set up the content to be displayed

1. Wrap the Drupal 7, login form in a ‘div’ and set style as display:none;
Here we use a custom module named ‘MyModule’ to implement the hook_preprocess_page() function to process variables.

function wcfc_custom_preprocess_page(&$vars) {
  global $user;
  if ($user->uid == 0) {
    $vars['loginpopup'] = "<div style='display:none'>" ;
    $vars['loginpopup'] .= "<div id='login-pop'>" ;
    $vars['loginpopup'] .= drupal_render(drupal_get_form('user_login'));
    $vars['loginpopup'] .= "</div>";
    $vars['loginpopup'] .= "</div>";
  }
}

2. Print the "loginpopup" variable to the pages wherever you need, like page.tpl.php, page--front.tpl.php etc.

<?php print($loginpopup); ?>

This helps us to keep the login form invisible and being processed at the time of page load.

Second Step:Trigger an event to display the login form

1. An anchor tag can be used to trigger the event. Create and place your link in the menu:

<a class="inlinepop" href="#login-popup">Login</a>

2. Now, set the corresponding click event with Colorbox in your js file

jQuery(document).ready(function($){
  $(".inlinepop").colorbox({inline:true, width:"50%", href:"#login-pop"});
});

And we are done :-)

 

 

Related Topics