УрокДелаем popup логин на jquery.ui.dialog

В ядре Drupal 7 появились дополнительные js библиотеки, которые можно подключать по необходимости (по умолчанию они отключены). В частности, библиотка jquery.ui, которая в 6й версии Друпала была отдельным модулем. Теперь же достаточно вызвать функцию drupal_add_library() с нужными параметрами - и необходимые скрипты и стили будут подключены автоматически.

Итак, делаем красивый попап логин. Для начала в template.php подключаем скрипт jquery.ui.dialog, который будет отвечать за вывод блока во всплывающее окно. Подключение происходит на этапе препроцесса страницы:

function ИМЯТЕМЫ_preprocess_page(&$vars) {
  global $user;
  // Подключаем библиотеку только для анонимов
  if (!$user->uid) {
    drupal_add_library('system', 'ui.dialog');
    // Добавляем ссылку, при нажатии на которую будет показываться логин
    $vars['login_button'] = l(t('Login'), 'user', array('attributes' => array('class' => array('user-login'))));
  }
}

Далее в page.tpl.php выводим эту ссылку:

<?php print $login_button; ?>

Далее просто перейдите в раздел блоков и выставьте блок с логином в любой удобный вам регион. Там он будет показываться для тех пользователей, у которых браузеры не поддерживают js.

Теперь создаём свой скрипт (назовём, например, theme.js) с таким кодом:

(function ($) {
 
  Drupal.behaviors.themeName= {
    attach:function (context, settings) {
 
      // Здесь указываем ID блока с логином.
      var $login_block = $('#block-user-login');
      if ($login_block.length > 0) {
 
        // Далее при загрузке страницы
        // блок переместится в попап, но не покажется.
        $login_block.dialog({
          autoOpen: false,
          title: Drupal.t('Login'),
          resizable: false,
          modal: true
        });
 
        // По клику на ссылку логина - показываем попап.
        $('.user-login', context).click(function() {
          $login_block.dialog('open');
          return false;
        });
 
      }
    }
  };
 
})(jQuery);

Подключаем js к теме. Далее раскрашиваем попап стилями - и красивая форма входа готова.

login.png

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

template.php

function ИМЯТЕМЫ_preprocess_page(&$vars) {
  global $user;
  if (!$user->uid) {
    drupal_add_library('system', 'ui.dialog');
    drupal_add_library('system', 'effects.explode');
    drupal_add_library('system', 'effects.slide');
    $vars['login_button'] = l(t('Login'), 'user', array('attributes' => array('class' => array('user-login'))));
  }
}

theme.js:

(function ($) {
 
  Drupal.behaviors.themeName= {
    attach:function (context, settings) {
 
      // Здесь указываем ID блока с логином.
      var $login_block = $('#block-user-login');
      if ($login_block.length > 0) {
 
        // Далее при загрузке страницы
        // блок переместится в попап, но не покажется.
        $login_block.dialog({
          autoOpen: false,
          title: Drupal.t('Login'),
          resizable: false,
          modal: true,
 
          // Новые эффекты.
          show: 'slide',
          hide: 'explode'
        });
 
        // По клику на ссылку логина - показываем попап.
        $('.user-login', context).click(function() {
          $login_block.dialog('open');
          return false;
        });
 
      }
    }
  };
 
})(jQuery);

К тому же, jquery.ui позволяет его ещё и потаскать по всему сайту, если схватить за верхушку :) Пример работы вы можете посмотреть нажав на кнопку "Вход" справа вверху.

Комментарии

Аватар пользователя xandeadx
xandeadx написал:

логичнее показывать окно сразу под кнопкой, а не в центре, лишние телодвижения

03.11.2011 01:11
Аватар пользователя Spleshka
Spleshka написал:

При открытии в диалоге форма автоматически получает фокус. Нажал на вход - и сразу вводи данные. Мне больше попап нравится.

03.11.2011 01:14
Аватар пользователя xandeadx
xandeadx написал:

я про то что попап надо показывать под кнопкой, а не в центре экрана. я на своих 23'' первый раз и не заметил что где-то открылось бледное окошечко ;)

03.11.2011 01:17
Аватар пользователя Spleshka
Spleshka написал:

понял про что ты. Да, действительно надо его переместить поближе к надписи. Спасибо.

03.11.2011 02:20
Аватар пользователя Spleshka
Spleshka написал:

Навешал плюшек на попап. Теперь незаметить его будет несколько сложнее)

03.11.2011 05:09
Аватар пользователя Гость
Гость написал:

Делаю все как написано.
Но почему-то не работает. Там где прописал print $login_button; выводится ссылка "имя" и ведет на страницу /user.
Что я не так делаю?

04.11.2011 00:38
Аватар пользователя Spleshka
Spleshka написал:

Так и должна выводиться ссылка и пести на страницу с юзером. Но если у вас будет работать скрипт - вместо перехода на /user откроется попап. И сбросьте кэш сайта на всякий случай.

04.11.2011 00:41
Аватар пользователя Гость
Гость написал:

Кэш, разумеется, сбрасывал.
Ладно, попробую еще раз и отпишусь

04.11.2011 01:27
Аватар пользователя Spleshka
Spleshka написал:

Как результаты?

06.11.2011 02:35
Аватар пользователя Алексей
Алексей написал:

Жень, большое вам спасибо за интересные посты. Многое уже в закладках :)

Теперь по теме поста. С блоками все понятно, а как по клику выцепить нужную страницу. К примеру, я установил модуль Contact.
В самом template.php достаточно поменять uri ссылки и класс.
В theme.js я изменил селектор (в моем случае, это id формы - #contact-site-form) и класс по клику на ссылку.

Модальное окно показывается только в том случае, если я уже нахожусь на странице контактов. В Аяксе я не силен, помогите, пожалуйста, подкорректировать код.

13.11.2011 15:04
Аватар пользователя Spleshka
Spleshka написал:

Для вашего случая подойдёт функция load(), которая позволяет вытягивать контент со страницы по селектору. Пример:

// Создаём div внизу страницы
$('body').append('<div id = "contact-form"></div>');
 
//Загружаем в этот div форму с ID #contact-site-form со страницы /contact 
$('#contact-form').load(Drupal.settings.basePath + 'contact #contact-site-form);

Чтобы load() по селектору работал в Drupal 6 - ставьте модуль jquery update.

13.11.2011 15:57
Аватар пользователя oleg
oleg написал:

Notice: Undefined variable: login_button в функции eval() (строка 1 в файле X:\home\dru7.loc\www\modules\php\php.module(74) : eval()'d code).
Здравствуйте!
вот такая вот ошибка вместо ссылки
Чтобы она могла значить ?
Спасибо!

02.12.2011 04:24
Аватар пользователя pantey
pantey написал:

так тут же все написано...не определена переменная login_button в функции eval() (строка 1 в файле по адресу X:\home\dru7.loc\www\modules\php\php.module(74) : eval()'d code)....открывай файл, и смотри че не так...или код файла кидай сюда...

02.12.2011 09:01
Аватар пользователя oleg
oleg написал:
02.12.2011 23:38
Аватар пользователя oleg
oleg написал:

А как ее определить функцию эту ?
все делаю так как в уроке, но выводит ошибку
и вообще это возможно реализовать на Drupal 7.9 ?

04.12.2011 17:09
Аватар пользователя Spleshka
Spleshka написал:

Хм. Вы вставляете кусок кода в блок, обрабатывая это форматом ввода php??

04.12.2011 18:23
Аватар пользователя oleg
oleg написал:

Я вставляю в созданный блок и обрабатывая это форматом ввода php получаю ошибку.
также я получаю ошибку когда вставляю этот же кусок кода в page.tpl.php.
По идее должно выводиться кнопка входа.
а выводиться ошибка.

04.12.2011 21:16
Аватар пользователя Spleshka
Spleshka написал:

Нет, если вы всё делали по уроку и в page.tpl.php выводили кнопку, то там она и выведется. В блок никакие переменные не передаются, т.к. вот этим кодом:

function ИМЯТЕМЫ_preprocess_page(&$vars) {
  global $user;
  // Подключаем библиотеку только для анонимов
  if (!$user->uid) {
    drupal_add_library('system', 'ui.dialog');
    // Добавляем ссылку, при нажатии на которую будет показываться логин
    $vars['login_button'] = l(t('Login'), 'user', array('attributes' => array('class' => array('user-login'))));
  }
}

переменная добавляется только в шаблон page.tpl.php. В нём надо вывести её так:

<?php if (isset($login_button)): ?>
  <?php print $login_button; ?>
<?php endif; ?>

И никаких ошибок не будет. Я сам именно этим способом себе сделал логин на этом сайте.

04.12.2011 23:44
Аватар пользователя Evseenkov
Evseenkov написал:

Здравствуйте, огромное спасибо, всё получилось с первого раза.
А вот ещё хотелось бы, чтобы была кнопка "Выход", ну и при залогинивании на сайте появлялась надпись, типа "Вы зашли, как User-Name, мы просто счастливы вас видеть".
Чтобы пользователь мог видеть, что он не анонимус, вошёл а на сайт.

Понятно, что можно сделать соответствующий блок, но как это сделать красиво?

11.02.2012 12:51
Аватар пользователя Spleshka
Spleshka написал:

Можно вот так написать в page.tpl.php:

<?php if ($user->uid): ?>
  Вы зашли как <?php print $user->name; ?>, мы просто счастливы вас видеть.
<?php endif;?>

Кнопка выйти делается ещё проще:

<?php if ($user->uid): ?>
  <?php print l('Выход', 'user/logout'); ?>
<?php endif; ?>

Оба кусочка кода можете положить в page.tpl.php в любое место.

11.02.2012 14:52
Аватар пользователя Evseenkov
Evseenkov написал:

Спасибо, получились, всё так просто и понятно! Даже я сразу въехал )))
Думаю, что и на вашем мегасуперсайте не помешало бы тоже какое-нибудь отображение зарегистрированного пользователя, ну, чтоб я видел, что зашёл, а то только кнопка "Вход" пропадает, и всё.

Пытаюсь изучать PHP, но, пока тяжко идёт. С таблицами и стилями было проще )))
Офигенно полезный сайт, огромное спасибо!
Хочу ещё задать вопрос по поиску...

11.02.2012 17:57
Аватар пользователя Spleshka
Spleshka написал:

Спасибо, я подумаю про кнопку "Выход". Скорее всего в блок вынесу.

12.02.2012 22:09
Аватар пользователя Evseenkov
Evseenkov написал:

Ещё момент, может быть кому-то полезно, типа таких чайников, как я.
Скрипт поп-окна не будет подхватываться, если отключён стандартный блок "Вход на сайт"

11.02.2012 19:40
Аватар пользователя Саша
Саша написал:

Спасибо очень полезный вариант исполнения. Я использовал ваш скрипт на 6 друпале и вот вернулся к нему на семерке. Но я хотел бы сказать вам про баг на вашем сайте: Если выключить яваскрипт в настройках браузера, то показывается блок входа на ваш сайт о обрезанном виде! (У меня браузер Мозила 10.0.1

17.02.2012 10:23
Аватар пользователя Evseenkov
Evseenkov написал:

Ещё раз спасибо за этот материал и ваще за весь сайт.

Хочу указать на один маленький косячок со стилями CSS, хотя может этот коммент больше относится к теме drupalace, но, думаю, в любом случае косячок затронет все темы, где применяется это окошко.

Дело в том, что классы, в к-рых задаётся ширина и др. фигня в этом popup окошке (в данном случае .ui-dialog), применяются и к остальным окошкам Друпала, я заметил, как открываются окна типа "добавить..." в панели управления Views. Смотрится с этим оформлением довольно забавно.

Думаю, надо бы прицепить дополнительный класс к конкретно этому окошку, и всё будет неплохо.

21.02.2012 21:23
Аватар пользователя Spleshka
Spleshka написал:

Спасибо, записал в список доработок темы :)

22.02.2012 04:46
Аватар пользователя Алексей
Алексей написал:

У меня проблема. Всё работает. За исключением того, что когда я захожу на сайт и захожу на другие страницы, то drupal выдаёт ошибку:

Notice: Undefined variable: login_button в функции include() (строка 174 в файле Z:\home\..\www\sites\all\themes\..\templates\page.tpl.php).

То бишь строка print $login_button;

Как решить?

28.03.2012 19:27
Аватар пользователя Алексей
Алексей написал:

Короче!

Всё решил!

Хорошенько прочитал этот форум и вместо " print $login_button;" написал

" if ($user->uid):
print l('Выход', 'user/logout');
else: print $login_button;
endif;"

и - вуаля! - всё работает!

28.03.2012 19:59
Аватар пользователя Алексей
Алексей написал:

Хреноватенький код я придумал. Барахлит. Вобщем, перечитал внимательно я форум и впечатал ранее предложенные схемы.

Вопрос к автору данной классной штуки. Вобщем, всё хорошо, только при вызове этой формы куда-то пропадает курсор из поля ввода имени пользователя. Приходится мышкой заново его туда устанавливать для набора имени. Мелочь, а не приятно. Вобщем, как сделать, что бы он не пропадал?

28.03.2012 23:33
Аватар пользователя Алексей
Алексей написал:

Вобщем, приглашаю всех на страницу http://drupalace.ru/tehnologiya-sozdaniya-popup-okon для дальнейшего развития этой темы.

29.03.2012 23:49
Аватар пользователя Serj
Serj написал:

В теме kanji не заработало сразу же т.к. $vars называется $variables
Т.е. строка подключения кнопки выглядит так:

  // Добавляем ссылку, при нажатии на которую будет показываться логин
    $variables['login_button'] = l(t('Login'), 'user', array('attributes' => array('class' => array('user-login'))));

Я же так понимаю, нельзя определять вторую препроцесс функцию?
Все остальное получилось сразу же. Спасибо

21.04.2012 11:17
Аватар пользователя Serj
Serj написал:

Замеченные минусы:

1)Если пользователь неверно вбил пароль, то его выкидывает на основную страницу сайта, что не удобно
2) не закрывается окно логина, если кликнуть вне области окна.

Это возможно исправить?

21.04.2012 21:31
Аватар пользователя Spleshka
Spleshka написал:

да.
1) Пишем AJAX логин или используем модуль ajax_register.
2) Да, пишем обработчик, который по клику вне окна закрывает его.

22.04.2012 00:08
Аватар пользователя Serj
Serj написал:

Плагины для меня писать пока слишком сложно.
Можете подсказать насчет модуля ajax_register?
Как его настроить вообще.
Я его установил, но на странице осталась стандартный блок логина, но при логине видно что Ajax отрабатывает. И после завершения он мне в блоке пишет:
Login successful. You are now being redirected. И все. даже не показывается мне что я залогинился.
В итоге при переходе н а любую ссылку. страница перересовывается и блок исчезает.

Попровал как альтернативу fancy_login но там не отображаются соц.кнопки для логина ( модуль ulogin),что не подходит, а исравить я сам не представляю как

22.04.2012 04:12
Аватар пользователя Gusev
Gusev написал:

Как подгрузить форму динамически через скрипт?

04.05.2012 10:57
Аватар пользователя tyuirk
tyuirk написал:

Все делаю по инструкции, пишет ошибку что не может предопределить

07.06.2012 08:01
Аватар пользователя Владимир_Р
Владимир_Р написал:

С Jquerty последних версий скрипт не работает, а он необходим (и новая версия и скрипт). Возможно как-то доработать?

26.10.2012 23:29
Аватар пользователя Руслан
Руслан написал:

Fatal error: Cannot redeclare corporate_preprocess_page() (previously declared in /home/name/public_html/avtobelor.ru/sites/all/themes/corporate/template.php:45) in /home/name/public_html/avtobelor.ru/sites/all/themes/corporate/template.php on line 145
выводит такую ошибку что значит?

30.10.2012 15:02
Аватар пользователя sergeybelya
sergeybelya написал:

Скорее всего в файле template.php дважды записана одна и та же функция corporate_preprocess_page()

30.10.2012 16:46
Аватар пользователя Гость
Гость написал:

function corporate_preprocess_page(&$vars) {
if (isset($vars['main_menu'])) {
$vars['main_menu'] = theme('links__system_main_menu', array(
'links' => $vars['main_menu'],
'attributes' => array(
'class' => array('links', 'main-menu', 'clearfix'),
),
'heading' => array(
'text' => t('Main menu'),
'level' => 'h2',
'class' => array('element-invisible'),
)
));
}
else {
$vars['main_menu'] = FALSE;
}
if (isset($vars['secondary_menu'])) {
$vars['secondary_menu'] = theme('links__system_secondary_menu', array(
'links' => $vars['secondary_menu'],
'attributes' => array(
'class' => array('links', 'secondary-menu', 'clearfix'),
),
'heading' => array(
'text' => t('Secondary menu'),
'level' => 'h2',
'class' => array('element-invisible'),
)
));
}
else {
$vars['secondary_menu'] = FALSE;
}
} это есть там

30.10.2012 17:10
Аватар пользователя sergeybelya
sergeybelya написал:

Если такая функция уже имеется, то пишите нужный код в ней, а повторное ее определение приводит к ошибке.

30.10.2012 17:32
Аватар пользователя Константин
Константин написал:

Всем привет! Сделал все по инструкции из первого поста, но что-то не работает

04.11.2012 17:59
Аватар пользователя Константин
Константин написал:

После ввода логина и пароля и нажатия на кнопку войти вываливается такое сообщение

Notice: Undefined variable: login_button в функции include() (строка 7 в файле /home/navros/k/sites/all/themes/bluemasters/page.tpl.php).

Что это?

04.11.2012 18:14
Аватар пользователя Mash
Mash написал:

Подскажите как при проверке валидации (по этому примеру прикручена webform) сделать так, чтобы не выкидывало на страницу вебформы при неверных значениях? То есть чтобы форма оставалась в том же окне?

01.12.2012 13:03
Аватар пользователя Spleshka
Spleshka написал:

Это вам к вебформе надо ajax прикручивать. Иначе - никак.

01.12.2012 15:17
Аватар пользователя Yarri
Yarri написал:

У меня не получается это сделать.
D7. Скрипт зарегистрирован через info.
page.tpl.php прописал.

А вот когда вставляю код в template.php, то сайт просто перестает открываться. Белая страница.
ИМЯТЕМЫ как положено заменил на имя своей темы с сохранением подчерка перед preprocess
Может быть глюк из-за длинного имени темы?
new_cons_woblik1_preprocess_page(&$vars) - вот такая у меня строка получается.

З.Ы. Увы. Сменил название темы, но белый лист все одно выпадает.
Закомментил все внутри функции - то же самое. Т.е. система ругается на само имя функции.
Вставлял в начале файла template после объявления <?php

10.12.2012 20:06
Аватар пользователя Гость
Гость написал:

Все работает, но есть проблемка, хочу вывести кнопку вход в "main-menu". Через модуль menu attributes сделал, все работает, но после того как залогинился, кнопка вход не исчезает и если на нее нажать ведет на форму профиля. Хотелось бы чтобы появлялась вместо нее кнопка Выход когда пользователь зашел. Пробую сейчас просто жестко поставить туда ссылку, прописав в page.tpl.php... как привязать к ссылке "user-login"? и как написать такое условие php? Не силен в php прошу помочь! Заранее спасибо!

05.01.2013 11:45
Аватар пользователя Гость
Гость написал:

А все, решено:) можно еще вопрос, проблема с кодировкой. В page.tpl.php создал новый див с ссылкой. На русском пишу "Вход" между и , но на сайте выходят знаки вопроса. Менял кодировку на utf-8, но тогда сайт съезжает, можно создать свою переменную которая будет переводить формат и просто тут вывести ее через php?

05.01.2013 14:59
Аватар пользователя bifrost
bifrost написал:

Убрать ошибку Notice: Undefined variable: login_button в функции include() (строка ....
можно таким кодом:

<?php if (isset($login_button)): ?>
  <div><?php print $login_button; ?></div>
<?php endif; ?>
25.01.2013 17:42
Аватар пользователя Дмитрий
Дмитрий написал:

Добрый день!

А возможно сделать так, чтобы форма входа в модальном окне появлялась при входе на страницу /user из адресной строки, чтобы не делать ссылку входа на страницах сайта?

12.02.2013 11:16
Аватар пользователя Дмитрий
Дмитрий написал:

То есть, пользователь вводит в адресной строке Site/user или site/admin и видит модальное окно с формой входа, а после входа переходит на главную.

12.02.2013 11:46
Аватар пользователя ERET1K
ERET1K написал:

Все работает! Очень классно, красиво! Но вылетает такая назойливая ошибка
Notice: Undefined variable: login_button в функции include()
чтоб предпринять?

13.09.2013 01:26
Аватар пользователя Сергей
Сергей написал:

Сделал вроде все как по уроку. Появляется окошко как надо. потом переходит на строницу входа пользователя (что вроде тоже так надо). Но потом окошко модальное окно пропадает, даже не удается ввести хоть какие данные. Где можно порыться?

07.01.2014 19:46
Аватар пользователя goodwin
goodwin написал:

Добрый день!
Прежде всего спасибо Вам за труды, Вы делаете интернет лучше :)
Есть вопросик. У меня все заработало, но... В заголовке окна вместо надписи "Вход на сайт" выводится слово "Имя" и я никак не могу его побороть. По идее должно быть все просто, но увы. Подскажите куда рыть, пожалуйста.

17.02.2014 11:58
Аватар пользователя Иван
Иван написал:

Замените t('Login') на 'Вход на сайт'

10.03.2014 23:04
Аватар пользователя Довран
Довран написал:

Не получилось, делал все как написана в уроке. Несколько раз. Тема skeleton.

21.04.2014 23:28
Аватар пользователя Redik
Redik написал:

тож не получилось. вставляю в темплейт функции - интерфейс не грузится - белое окно... убираю - все нор.

07.10.2014 16:40

Комментировать