Drupal: Всплывающее окно входа в систему

Если вам требуется отобразить форму входа в систему Drupal 7 во всплывающем окне - эта статья для вас. Для решения этой задачи можно воспользоваться средствами jQuery, или библиотекой Colorbox. В последнем варианте нужно установить модуль Colorbox для Drupal.

Всплывающее окно входа в систему используя Colorbox

Шаг 1: Подготавливаем контент для оображения

1. Оборачиваем форму входа в систему Drupal 7 в ‘div’ контейнер и устанавливаем для этого контейнера CSS стиль ‘display:none;’

Разместим следующую функцию, реализующую hook_preprocess_page(), в файле template.php вашей темы:

function my_theme_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. Выводим переменную "loginpopup" на странице, в шаблоне вашего сайта, например в файле page.tpl.php, page--front.tpl.php и т.д.

<?php print($loginpopup); ?>

Это позволит загрузить форму входа в систему при загрузке страницы и сохранит ее невидимой.

Шаг 2: Генерируем событие, для отображения формы входа в систему

1. Создаем на страничке ссылку со следующими параметрами:

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

2. Теперь, прописываем соответствующий обработчик нажатия ссылки:

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

Вот и все. Форма входа в систему Drupal красиво отображаетя во всплывающем окне при нажатии на ссылку.

Всплывающее окно входа в систему средствами jQuery

Для данного примера я буду использовать чистую установку Drupal. Для того, чтоб ее установить почитайте статью Установка Drupal 7. Далее будет показано что нужно сделать, чтоб получить рабочее всплывающее окно входа в систему. Если в тягость читать много букв - в конце статьи вы найдете прикрепленный файл, разпаковав который вы получите тему, описанную в данной статье.

1. Cоздаем копию темы Bartik (я создал новую тему с именем  custom).
2. Переименуем файл bartik.info в custom.info
3. Откроем для редактирования файл custom.info. В поле name пропишем свое название (я написал "name = Clone of Bartik theme")
4. В этом-же файле следует добавить строку "regions[login_popup] = Login popup"
5. Сохраняем файл custom.info и закрываем его.
6. Открываем файл template.php. Добавляем строку "drupal_add_js(drupal_get_path('theme', 'custom') . '/js/custom.js');"
7. Создаем папку js. Внутри нее создаем файл custom.js, открываем его на редактирование. Вставляем код, приведенный далее, сохраняем и закрываем:

   jQuery(document).ready(function($) {
    $('#login-button').bind('click', function () {
        $('#login_popup_container').stop().show(400);
    });
    $('#close').bind('click', function () {
        $('#login_popup_container').stop().hide(400);
    });
   });
   

8. Открываем файл templates/page.tpl.php, добавляем следующий кусок кода в том месте файла, где вам нужно. Я добавил в самом начале файла.

   <ul class="menu actions-menu">
       <li>
           <a id="login-button">Login</a>
       </li>
   </ul>

9. В конце файла добавляю еще один кусок кода:

   <!-- LOGIN POPUP -->
    
   <?php
     /*global $user;
     if (!$user->uid) {*/
   ?>
    
   <div id="login_popup_container">
       <div id="login_popup">
           <div class="content">
               <a id="close">X</a>
           <?php print render($page['login_popup']);?>
           <?php print theme('links__system_secondary_menu', array('links' => $secondary_menu, 'attributes' => array(
           'id' => 'secondary-menu', 'class' => array('links', 'inline', 'clearfix')))); ?>
           </div>
       </div>
   </div>
    
   <?php
     //}
   ?>
   <!-- LOGIN POPUP END -->

10. Сохраняем и закрываем файл page.tpl.php
11. Открываем для редактирования файл css/style.css. Добавляем следующий кусок кода, сохраняем и закрываем его:

    #login_popup_container {
        background-color: rgba(5, 110, 194, 0.5);
        border-radius: 10px;
        display: none;
        left: 300px;
        margin: 0 auto;
        padding: 10px;
        position: fixed;
        top: 300px;
    }
    
    #login_popup { background-color: #FFFFFF; border-radius: 5px; padding: 30px; }
    #login_popup label { text-align: left; }
    #login_popup .form-actions { margin: 0; padding: 0; }
    #login_popup .form-actions input {
        background-color: #386600;
        border: 0 none;
        color: #FFFFFF;
        margin: 0;
        padding: 5px;
    }
    
    #login_popup ul li {
        margin-left: 20px;
        padding: 0;
        text-align: left;
    }
    
    #block-user-login .content { margin-top: 10px; }
    
    #close {
        content: "X";
        display: block;
        float: right;
        overflow: auto;
        position: absolute;
        right: 20px;
        top: 20px;
    }
    
    #close:hover {
        cursor: pointer;
        font-weight: bold;
        text-decoration: none;
    }

12. Открываем меню Оформление, включаем нашу новую тему и делаем ее по умолчанию
13. Открываем меню Конфигурация - Производительность - Очистка кэша
14. Открываем меню Структура - Блоки. Для блока Вход на сайт устанавливаем область Login popup. После сохранения изменений вы получите всплывающую форму входа в систему.

Использование модулей Drupal

Создание всплывающих окон входа в систему Drupal весьма актуальная тема, поэтому не удивительно, что для решения данного вопроса имеются модули, непример Popup.