2011 14 апреля

Всплывающее окно авторизации (jquery)

Не знаю, почему вспомнил про такую банальщину, но в блоге снова недавно спросили "а как сделать по клику на сайте всплывающий блок с формой авторизации". Потому, как это ни пошло выглядит, опишу пару элементарных действий. Код на основе Jquery, на mootools переписать желающим проблем нет.
Итак по порядку 1 - создаем новую позицию вывода модуля, к примеру, "login", на ней публикуем модуль авторизации, задаем суффикс класса модуля "-login" 2 - в шаблоне index.php сразу после открытия прописываем вывод
1
<jdoc:include type="modules" name="login" style="xhtml" />
3 - в хедере индекса шаблона пишем (код для примера)
1
23
45
67
89
1011
12
<script type="text/javascript">
                $(document).ready(function(){                        $("#modloginajax").click(function () {
                                $(".moduletable-login").slideToggle("slow");                        });
                });                $(document).ready(function(){
                        $("#login_closs_ico").click(function () {                                $(".moduletable-login").slideToggle("slow");
                        });                });
</script>
Первый блок отвечает за поведение какой-либо ссылки в теле страницы, у которой задан id="modloginajax", располагать эту ссылку можно где угодно, в моем случае она зашита в модуль поиска и выглядит так (return false зачем прописан объяснять не буду, чтобы при поддержке JS не было перехода на ссылку, а если поддержки нет - чтобы переход работал)
1
23
45
67
8
<?php
$user =& JFactory::getUser(); if (!$user->id) {
?><a href="<?php echo JURI::base(); ?>/login.html" title="Авторизация" id="modloginajax" onclick="return false;">Вход</a>
<?php } else  { ?><a href="<?php echo JURI::base(); ?>/login.html" title="Выход <?php echo $user->username; ?>" id="modloginajax" onclick="return false;">Выход</a>
<?php } ?>
Второй блок кода отвечает за поведение кнопки "закрыть окно", у меня это картинка с id="login_closs_ico", зашитая в шаблон модуля авторизации до начала всех условий
1
<img src="close.png" alt="Закрыть" title="Закрыть" id="login_closs_ico" />
Ну и немного CSS кода (оформляем как угодно)
1
23
45
67
8
.moduletable-login {
        display: none; right: 30px; top: 80px; width: 300px;        z-index:1000;
        position: absolute;        background-color: #fff; border: 1px solid #8CC2DB;
        padding: 5px 10px 5px 10px;}
#login_closs_ico {position: absolute; right: 15px; top: 10px; cursor: pointer;}
Банальщина полная, конечно же, но мало ли кому пригодится, а то ставят мега модули с кучей кода, когда все решается элементарно. Как выглядит в работе можно посмотреть на http://rcoi.net/ справа вверху под поиском ссылка "вход"

Другой способ реализации от Fedor

Вместо
1
2
<img src="close.png" alt="Закрыть" title="Закрыть" id="login_closs_ico" />
<div id="login_closs_ico"></div>
Стиль
1
23
45
67
89
#login_closs_ico {
position: relative;right: 15px;
top: 10px;width: 15px;
height: 16px;cursor: pointer;
background-image: url(data:;base64,iVBORw0KGgoAAAANSUhEUgAAAA8AAAAQCAYAAADJViUEAAAABGdBTUEAAK/INwWK6QAAABl0RVh0U29mdHdhcmUAQWRvYmUgSW1hZ2VSZWFkeXHJZTwAAAGmSURBVHjafJO9isJAEMcnMSIqh/HQRkEUe5/A9xAEe9/CRhALa7ETEXwEBW0srazlChFFTbEx5Pw6gs7NLpfgetE/DNmd2d/sZHZXud/vXwCgk4GiKOBqvV5DOByGRCIh5ogoxUkWEGyjj0zTxEajgcfjUcxpnRfjY86plMEBH8XjcTAMA5rNJryQw3dm+EKdTgd1XUfGfJcwFd7Itm2wLAvm87lv/C08HA7Fd7vdSn7ePAE/dtB1co3HY5hOp2IcDAYl2GW0Z+dut4NutwvtdhtutxuoqgrpdNq/tMeG9Xo9zGazfHvPYrEYbjYb34bxUgVcr9clyDXaWSR9CQ8GA7GwUChgtVrFWq2G5XLZS0Bl42Kx+A/TGbJisYj0j3i5XKRoq9XCaDQqEuRyOaQmyvBkMmGj0UiCHq/ibDbDSqWCyWRSXJhSqYT9fh/3+z1TVqsVy2Qyn8+NfH4I/BSWyyXQXYdUKgX5fN5UTqcTfxgfVJ4vfL1e4XA4wPl8Fn7+0vhasm8tFAoZFPjhZxoIBDyIm+M4AtY0DahkiEQiAv5Lbv0KMABkx7NcfuTtxgAAAABJRU5ErkJggg==);}
Здесь кодируем к примеру наше изображение http://www.askapache.com/online-tools/base64-image-converter/ Результат на 1 один запрос меньше, css кешируется Кнопка закрытия в данном случае с вашего примера

Комментарии

0 Владимир пишет нам 17.04.2011 21:45
Скажите, вы можете сделать подобный поиск по каталогу К2 (рубрикатору)для joomla 1.5.22. (поиск нужен проще по 3-м видам фильтров). http://www.4tochki.ru/wheells_selection.html
Цитировать Сообщить модератору
0 Beliyadm отвечает 17.04.2011 22:22
Какой поиск? Данная тема посвящена простейшему хаку для создания всплывающего окна авторизации, но никак не форме поиска по каталогу К2 (с которым никогда почти не работал). Уточните, пожалуйста, задачу
Цитировать Сообщить модератору
0 Lasertag пишет нам 05.11.2011 17:27
А как создаем новую позицию вывода модуля?
Цитировать Сообщить модератору
0 Beliyadm отвечает 07.11.2011 19:37
Прописываем в XML файле шаблона
Цитировать Сообщить модератору
0 Антон пишет нам 03.01.2012 23:14
Как сделать тоже самое на mootols?
Цитировать Сообщить модератору
0 Beliyadm отвечает 04.01.2012 02:30
На мутулзе полностью аналогичный принцип, единственно что код js будет чуть другой. А вообще, если не ошибаюсь, для ссылки можно прописать class="modal" и будет работать стандартная библиотека для открытия с лайтбокс эффектом
Цитировать Сообщить модератору
0 Антон пишет нам 04.01.2012 16:19
class=»modal» не срабатывает. Не подскажешь какой код для mootols должен быть?
Цитировать Сообщить модератору
0 Beliyadm отвечает 04.01.2012 16:29
Там еще от версий мутулза многое зависит, например, можно посмотреть здесь http://cleverscript.ru/javascript/13-scripts/48-popup.html
Цитировать Сообщить модератору
0 anoorik пишет нам 02.03.2012 13:02
Здравствуйте. У меня не получается сделать. Ссылка "вход" выводится. но окно не открывается. Форма входа стоит от Community builder. Суффикс прописал в модуле
Цитировать Сообщить модератору
0 Beliyadm отвечает 08.03.2012 10:54
Добрый день. Возможно какие-либо конфликты скриптов (проверить firebug-ом), если все описанное сделано верно.
Цитировать Сообщить модератору
0 Fedor пишет нам 16.03.2012 20:22
Хорошая статья. Только вот это зачем Не проще (лучше) было Div оформить в css, картинку в base64 и туда же. На 1 один запрос меньше
Цитировать Сообщить модератору
0 Beliyadm отвечает 16.03.2012 20:27
Почему нельзя, можно и возможно даже лучше. Если опишите подробней (для широких масс) - будет прекрасно.
Цитировать Сообщить модератору
0 Сергей пишет нам 23.12.2014 21:59
JOOMLA 3.3.6 шаблон protostar. Все сделал как описано -- ссылка выводится но при клике ничего не происходит. Что посоветуете? Я новичок.
Цитировать Сообщить модератору
0 Beliyadm отвечает 28.12.2014 02:44
Для Joomla 3 может и не работать, бо разные версии фреймоворков + другие мелочи Для тройки не тестировал, надо прогнать и обновить пост
Цитировать Сообщить модератору
0 Никита пишет нам 23.01.2016 15:26
Вопрос может покажется смешным, но ведь в это окно можно установить не только -вход-, ай не что другое, например, обратный звонок? Или может у Вас есть готовое решение Заранее, благодарен
Цитировать Сообщить модератору
0 Beliyadm отвечает 23.01.2016 15:46
Конечно, таким образом можно ставить любой блок, хоть авторизацию, хоть звонок и что угодно. Готовых решений нет, но собственно вот оно и есть. Хотя если вам нужен модуль обратного звонка - то такой есть у меня, пример тут (справа внизу окна иконка вызова формы)
Цитировать Сообщить модератору

Оставить коммент

Защитный код
Обновить