Главная » Новости

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

Опубликовано: 02.11.2017

Уроки по Bootstrap 3 | #18 Создание сетки masonry

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

Шаг 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 и т.д.

AJAX WebFactor Form - 01 Установка и первичная настройка формы

<?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 красиво отображаетя во всплывающем окне при нажатии на ссылку.

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