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.

Тэги: 
Прикрепленный файл: 
Package icon

There are 6 Comments

ОООчень прошу помочь, что нужно сделать чтобы вспывающая форма была такая как у вас на картинке, только средствами jQuery, очень буду рад если напишете на почту. Или ответьте тут в комментарие: куда весь выше описанный код (средствами jQuery) нужно вставить?
моя почта dmitrybarynov@gmail.com

P.S. долго ищу нормальный модуль но все всплывающие формы ужасные. А такого как на картинке негде нет(

Доброго дня.

Мне кажется вы путаете термины CSS и jQuery. Внешний вид формы настраивается через CSS, а jQuery отвечает за то, что при нажатии на ссылку, или кнопку, будет вызвана функция JavaScript, в которой будет изменено CSS свойство, отвечающее за видимость формы. В реальности, можно вообще обойтись без jQuery, но отказываться от него нет смысла, так как он является частью системы Drupal.

Форма, что изображена на рисунке, нарисована пару лет назад, когда я еще был молодым и зеленым, поэтому я пошел простым путем и сделал для нее фоновый рисунок, имеющий два слоя - нижний полупрозрачный, а верхний непрозрачный.

Более правильный вариант - это сделать все на чистом CSS + HTML. Для решения этим способом задачи я дополнил статью информацией и прикрепил файл, чтоб легче было разбираться.

Твори, или уйди в сторону и не мешай творить другим.
Делись своим опытом и знаниями, ибо в могиле они тебе вряд-ли пригодятся.

Я новичок в друпале, и по этому не могу понять куда нужно прописывать код из шага 2.
В частности эти:
1. Создаем на страничке ссылку со следующими параметрами:
<a class="inlinepop" href="#login-popup">Login</a>
2. Теперь, прописываем соответствующий обработчик нажатия ссылки:
jQuery(document).ready(function($){
$(".inlinepop").colorbox({inline:true, width:"50%", href:"#login-pop"});
});

Пожайлуста ответьте

Первый пункт прописываем в файле шаблона (чаще всего page.tpl.php)

Второй пункт прописывается в /file_name.js' файле, который загружаете в файле template.php, который находится в корневой папке вашей темы

В template.php загружаете JavaScript файл:

drupal_add_js(drupal_get_path('theme', 'theme_name') . '/file_name.js');

Твори, или уйди в сторону и не мешай творить другим.
Делись своим опытом и знаниями, ибо в могиле они тебе вряд-ли пригодятся.

Здравствуйте! Скажите пожалуйста как сделать чтобы всплывающая картинка или лого сайта появилось при загрузке веб страницы, то есть когда открываем сайм. Знаю что используется функция onload, а как ее прописать и где?

Достаточно будет функции .ready(), которая вызывается сразу после того, как документ загружен.

jQuery(document).ready(function($) {
     $('#login_popup_container').show(400);

 $('#close').bind('click', function () {
     $('#login_popup_container').stop().hide(400);
 });
});


Но мне кажется, такая логика будет неудобной для посетителей сайта, которые при загрузке каждой страницы будут лицезреть всплывающее окно.

Твори, или уйди в сторону и не мешай творить другим.
Делись своим опытом и знаниями, ибо в могиле они тебе вряд-ли пригодятся.

Страницы

Добавить комментарий

You must have Javascript enabled to use this form.

Статьи по теме:

  •  
  • 1 из 10