УрокPop-up логин при помощи javascript
Обычный логин занимает на сайте много места, а это может быть критично для некоторых сайтах. Так что сегодня я расскажу о том, как можно сделать симпатичный всплывающий логин.
Как это сделать в теории:
- запихиваем блок логина в какой-нибудь div
- скрываем этот div через css (display:none;)
- создаём кнопку/ссылку с надписью ВХОД
- вешаем скрипт, который при нажатии на кнопку ВХОД показывает/прячет div с блоком логина
А теперь к практике:
Напишем в template.php функцию, которая будет показывать анонимам кнопки ВХОД и РЕГИСТРАЦИЯ, а зарегистрированным - ПРОФИЛЬ и ВЫХОД (а заодно и блок логина обернём в div):
function custom_login() { $output = '<div id = "custom_login">'; //оборачиваем наш код в дополнительный div global $user; if ($user->uid) { //если пользователь авторизовался, то //выводим ссылку на его профиль и на выход $output .= l('Профиль','user/'.$user->uid); $output .= l('Выход','logout'); } else { //если на сайте пользователь сидит в качестве анонима, то //выводим ссылку на вход на сайт и на регистрацию, при этом обернув //блок логина в дополнительный div $output .= l('Вход','user', array('attributes' => array('class' => 'login'))); $output .= l('Регистрация','user/register'); //функция module_invoke позволяет "выдирать" любую часть любого модуля $block = module_invoke('user', 'block', 'view', 0); $output .= '<div class = "login_block">'. $block['content'] .'</div>'; } $output .= '</div>'; return $output; }
Далее эту функцию вставляем в нужное место в page.tpl.php:
print custom_login();
Далее создаём пустой файл с расширением .js и пишем туда функцию, которая будет показывать и прятать блок логина при нажатии на кнопку ВХОД:
$(document).ready(function() { $('#custom_login a.login').click(function() { $('#custom_login .login_block').slideToggle(200); // return false для того, чтобы при клике на ВХОД // пользователь не перешёл на новую страницу return false; }); });
Кстати, если вы обратили внимание - ссылка ВХОД хоть и просто открывает блок входа без загрузки страницы, но ведёт всё равно на страницу /user (страницу логина). Это сделано для того, чтобы пользователи, не имеющие поддержку javascript'ов, смогли найти страницу логина (т.е. работа сайта не нарушится)
Далее подключаем этот файл к теме.
И немного css:
div#custom_login { position: absolute; /*или relative, смотря как будете использовать*/ left: 20px; top: 50px; } div#custom_login a { color: black; padding: 10px; position: relative; z-index: 9999; } div#custom_login a:hover { background: white; } div#custom_login .login_block { background: none repeat scroll 0 0 white; border: 1px dashed; display: none; padding: 10px; position: absolute; top: 0; }
У меня получилось вот так в обычном виде:

и вот так - при нажатии на кнопку ВХОД

С css я не заморачивался, извините =) Поменять цвет и фон, я надеюсь, вы сможете сами.
В принципе тут можно закончить урок - моя миссия завершена - popup логин сделан и готов к использованию. Но, всё же из любви к прекрасному, я подскажу как его немного темизировать.
Для в template.php запишем следующие 2 функции:
function ИМЯТЕМЫ_theme(){ return array( 'user_login_block' => array( 'arguments' => array('form' => NULL), ), ); } function ИМЯТЕМЫ_user_login_block($form) { unset($form['name']['#title']); unset($form['pass']['#title']); $form['name']['#value'] = 'Имя пользователя'; $form['name']['#attributes'] = array( 'onBlur'=> "if (this.value.length == 0) {this.value='{$form['name']['#value']}'}", 'onFocus'=> "if (this.value== '{$form['name']['#value']}') {this.value=''}" ); $form['submit']['#value'] = 'Вход'; return drupal_render($form); }
В итоге получается такой блок:

Теперь с помощью css можно привести блок к более симпатичному виду. Однако, это уже остаётся на самостоятельную работу по своему вкусу =)
- SplasH
- 28.12.2010
- 14627
Комментарии
Как раз недавно про это :)
На мой взгляд, сокрытие формы логина через CSS не совсем верно, так как тогда граждане с отключенным JS (e.g. обладатели не очень новых мобильников) будут вынуждены переходить на страницу /user для входа, что еще менее удобно, чем оригинальный большой блок логина. Лучше всего добавить .hide() в JS.
да, но тогда внешняя красота сайта может быть нарушена торчащим посреди страницы блоком входа :) Хорошо, если блок никому не мешает - тогда ваш вариант работает. Но если блок перекрывает контент - то тут уже лучше через css, на мой взгляд
Расширенный вариант выпадалок с формами и прочих popup-ов. Подключаем модуль jquery_ui. Подключаем свой модуль из 5-ти строк кода (на hook_init вешаем функцию jquery_ui_add(array('ui.draggable', 'ui.resizable', 'ui.dialog'));) В теме (page.tpl.php) вызываем js-функцию dialog(), в которую передаем название формы и drupal_get_form(form_id) (в нашем случае - user_login_block). Результат - полностью настраиваемая выпадалка-лайтбокс, содержащая форму (ноду, блок, видео, все, что угодно можно засунуть). Рабочий "корпоративный" вариант из последнего сделанного можно посмотреть здесь - http://www.talentory.com/eng/user/register - клик на ссылку View под Terms & conditions (откроется нода). Базовый вариант - http://jqueryui.com/demos/dialog/. Это я к тому, что если необходим функционал чуть более гибкий, то лучше юзать уже готовые jquery-расширения.
Спасибо, Ростислав! Безусловно, в некоторых случаях гораздо проще воспользоваться готовыми вариантами. Но сайт с небольшим уклоном в самоделки, чтобы понимать "как оно там вертится-то". Именно поэтому я предлагаю всё сделать самим =)
SplasH привет :)
А если есть модуль формы отправки, самая простая, к примеру:
function form_menu(){
$items['form'] = array(
'title' => 'Отправить',
'description' => 'Отправить',
'page callback' => 'form_page',
'access arguments' => array('access content'),
'type' => MENU_SUGGESTED_ITEM,
);
return $items;
}
function form_page() {
$content = drupal_get_form('form_page_order');
return $content;
}
function form_page_order($form_state) {
$form['name']['fio'] = array(
'#type'=> 'textfield',
'#title'=> t('Ваше имя'),
'#default_value'=> $fio,
'#required'=> TRUE,
$form['submit'] = array(
'#type' => 'submit',
'#name' => 'sendMail',
'#id' => 'sbm_button',
'#value' => t('Submit'),
);
return $form;
}
Как форму можно загрузить в всплывающем окне ? Подскажи пожалуйста
ну оберни форму в див:
После этого повесь на клик какой-то кнопки/ссылки, чтобы показывало и скрывало твою форму:
Спасибо огромное, логику понял :)
Спасибо Жека) У меня тоже есть пара вопросов:
1. Сделал раскрывающимся стандартный блок входа. Но каждый раз когда авторизуюсь через него у меня все стопорится и белый экран..
Если нажать после этого Ф5 страница загрузится - и я уже авторизован.. Хрень какая-то.
2. Как сделать на седьмом осле, чтобы блок который мы раскрываем был поверх всего остального? А то он у меня под сайдбаром прячется..
@Graker
Вход и регистрацию можно продублировать в футере. Как на хабре.
1. Скорее всего надо поменять кодировку в template.php на UTF8 без BOM
2. Пропиши блоку, который должен раскрываться поверх остального в css:
А с логином в футере я подумаю :) Спасибо :)
Скажите пожалуйся, а можно ли как-то выводить это меню при наведении на ссылку из Primary links?
Заранее спасибо
можно) Самый простой вариант - посмотреть код у тэга li этого пункта меню, и повесить на него обработчик событий в скрипте.
Например, если бы я хотел повесить выскакивающий логин на пункт меню "Задать вопрос", то мой javascript файлик содержал бы:
Ничего не получается( у меня у всех пунктов меню стоит leaf.
а не menu-номер( Я где-то что-то неправильно сделал или не там ищу?
Выведите это меню через page.tpl.php таким же образом:
а форму регистрации как вывести можно?
Это форма логина. Присоединяюсь к вопросу по поводу регистрации...
тупоо:DEVIL::DEVIL:а смайлы класссс
Почему то слетал tabindex, пришлось поправить код:
Как сделать чтобы этот блок не всплывал на страницах /user*
А то это выглядит ужасно!
Решил так:
Только для uri не равным /user*
1. Добавляю класс (чтобы не сработал js)
2. Вставляю блок
Не совсем понятно где создаётся файл js, как он называется и как его подключить. Поясните пожалуйста.
Спасибо. Правда для 7-о друпала помучался.
Что то немогу никак заставить под 7 работать, подскажите в чём может быть загвоздка, такое впечатление что он куда то не туда выводит, всплывающее окно, при нажатии на кнопку ничего не происходит
А блок с логином на странице присутствует?
Уже второй раз перечитываю ваш урок, все описанное выше получается, но вот никак не получается с Pop-up javascript окном, как заставить работать все это на drupal 7, пожалуйста! помогите разобраться
Здравствуйте. Все сделал по уроку, Но! не работает. при нажатии на кнопку вход выводит ошибку, а при нажатии на кнопку регистрации перекидывает на стандартную регистрацию
Какую ошибку выдаёт при нажатии на вход?
Комментировать