Создаём всплывающее окно авторизации для Joomla

Эффект «всплывающего окна» на сайтах не редкость. Каждый использует его по собственному усмотрению, одни пытаются создать красивый и анимированный объект, а другие просто экономят места на странице. Чаще всего такой приём использую для создания полноценной галереи, чтобы изображения открывались в полный размер. На странице устанавливают миниатюру картинки и добавляют к ней особое значение в тегах, после нажатия по миниатюре скрипт находит оригинал и грузит его на передний план монитора. Как бы там ни было, уметь создавать подобный эффект будет полезно каждому. Сегодня мы рассмотрим всплывающее окно, в котором будет располагаться модуль авторизации (зайти на сайт под логином и паролем). Создадим кнопку на сайте, при помощи которой будет открываться форма авторизации. Особой версии joomla для этого не требуется, как в прочем и неважно какой шаблон используется. Но для чистоты эксперимента, у меня Joomla 3.x и стандартный protostar.

всплывающее окно авторизации для Joomla

1. Создаём файлы для всплывающего окна

Первым делом создаём файлы facebox.js и facebox.css при помощи программы notepad++. Их мы кладём в папку с тем же названием facebox:

Создаём файлы для всплывающего окна

facebox.js отвечает за анимацию, но не умеет определять что конкретно необходимо показать. Он работает только с теми элементами, которые имеют определённое значение в тегах. И даже в этом случае придётся ему подсказать, где они. Поэтому на странице будем дописывать небольшой скрипт. Но об этом позже, а сейчас в facebox.js вставляем это:

jQuery код:
  1. (function($) {
  2.   $.facebox = function(data, klass) {
  3.     $.facebox.loading()
  4.  
  5.     if (data.ajax) fillFaceboxFromAjax(data.ajax, klass)
  6.     else if (data.image) fillFaceboxFromImage(data.image, klass)
  7.     else if (data.div) fillFaceboxFromHref(data.div, klass)
  8.     else if ($.isFunction(data)) data.call($)
  9.     else $.facebox.reveal(data, klass)
  10.   }
  11.  
  12.   $.extend($.facebox, {
  13.     settings: {
  14.       opacity      : 0.2,
  15.       overlay      : true,
  16.       loadingImage : '',
  17.       closeImage   : '',
  18.       imageTypes   : [ 'png', 'jpg', 'jpeg', 'gif' ],
  19.       faceboxHtml  : '\
  20.     <div id="facebox" style="display:none;"> \
  21.       <div> \
  22.         <div> \
  23.         </div> \
  24.         <a href="#">close</a> \
  25.       </div> \
  26.     </div>'
  27.     },
  28.  
  29.     loading: function() {
  30.       init()
  31.       if ($('#facebox .loading').length == 1) return true
  32.       showOverlay()
  33.  
  34.       $('#facebox .content').empty()
  35.       $('#facebox .body').children().hide().end().
  36.         append('<div><img src="'+$.facebox.settings.loadingImage+'"/></div>')
  37.  
  38.       $('#facebox').css({
  39.         top:    getPageScroll()[1] + (getPageHeight() / 10),
  40.         left:    $(window).width() / 2 - 205
  41.       }).show()
  42.  
  43.       $(document).bind('keydown.facebox', function(e) {
  44.         if (e.keyCode == 27) $.facebox.close()
  45.         return true
  46.       })
  47.       $(document).trigger('loading.facebox')
  48.     },
  49.  
  50.     reveal: function(data, klass) {
  51.       $(document).trigger('beforeReveal.facebox')
  52.       if (klass) $('#facebox .content').addClass(klass)
  53.       $('#facebox .content').append(data)
  54.       $('#facebox .loading').remove()
  55.       $('#facebox .body').children().fadeIn('normal')
  56.       $('#facebox').css('left', $(window).width() / 2 - ($('#facebox .popup').width() / 2))
  57.       $(document).trigger('reveal.facebox').trigger('afterReveal.facebox')
  58.     },
  59.  
  60.     close: function() {
  61.       $(document).trigger('close.facebox')
  62.       return false
  63.     }
  64.   })
  65.  
  66.   $.fn.facebox = function(settings) {
  67.     if ($(this).length == 0) return
  68.  
  69.     init(settings)
  70.  
  71.     function clickHandler() {
  72.       $.facebox.loading(true)
  73.  
  74.       var klass = this.rel.match(/facebox\[?\.(\w+)\]?/)
  75.       if (klass) klass = klass[1]
  76.  
  77.       fillFaceboxFromHref(this.href, klass)
  78.       return false
  79.     }
  80.  
  81.     return this.bind('click.facebox', clickHandler)
  82.   }
  83.  
  84.   function init(settings) {
  85.     if ($.facebox.settings.inited) return true
  86.     else $.facebox.settings.inited = true
  87.  
  88.     $(document).trigger('init.facebox')
  89.     makeCompatible()
  90.  
  91.     var imageTypes = $.facebox.settings.imageTypes.join('|')
  92.     $.facebox.settings.imageTypesRegexp = new RegExp('\.(' + imageTypes + ')$', 'i')
  93.  
  94.     if (settings) $.extend($.facebox.settings, settings)
  95.     $('body').append($.facebox.settings.faceboxHtml)
  96.  
  97.     var preload = [ new Image(), new Image() ]
  98.     preload[0].src = $.facebox.settings.closeImage
  99.     preload[1].src = $.facebox.settings.loadingImage
  100.  
  101.     $('#facebox').find('.b:first, .bl').each(function() {
  102.       preload.push(new Image())
  103.       preload.slice(-1).src = $(this).css('background-image').replace(/url\((.+)\)/, '$1')
  104.     })
  105.  
  106.     $('#facebox .close').click($.facebox.close)
  107.     $('#facebox .close_image').attr('src', $.facebox.settings.closeImage)
  108.   }
  109.  
  110.   // getPageScroll() by quirksmode.com
  111.   function getPageScroll() {
  112.     var xScroll, yScroll;
  113.     if (self.pageYOffset) {
  114.       yScroll = self.pageYOffset;
  115.       xScroll = self.pageXOffset;
  116.     } else if (document.documentElement &amp;&amp; document.documentElement.scrollTop) {     // Explorer 6 Strict
  117.       yScroll = document.documentElement.scrollTop;
  118.       xScroll = document.documentElement.scrollLeft;
  119.     } else if (document.body) {// all other Explorers
  120.       yScroll = document.body.scrollTop;
  121.       xScroll = document.body.scrollLeft;
  122.     }
  123.     return new Array(xScroll,yScroll)
  124.   }
  125.  
  126.   // Adapted from getPageSize() by quirksmode.com
  127.   function getPageHeight() {
  128.     var windowHeight
  129.     if (self.innerHeight) {    // all except Explorer
  130.       windowHeight = self.innerHeight;
  131.     } else if (document.documentElement &amp;&amp; document.documentElement.clientHeight) { // Explorer 6 Strict Mode
  132.       windowHeight = document.documentElement.clientHeight;
  133.     } else if (document.body) { // other Explorers
  134.       windowHeight = document.body.clientHeight;
  135.     }
  136.     return windowHeight
  137.   }
  138.  
  139.   function makeCompatible() {
  140.     var $s = $.facebox.settings
  141.  
  142.     $s.loadingImage = $s.loading_image || $s.loadingImage
  143.     $s.closeImage = $s.close_image || $s.closeImage
  144.     $s.imageTypes = $s.image_types || $s.imageTypes
  145.     $s.faceboxHtml = $s.facebox_html || $s.faceboxHtml
  146.   }
  147.  
  148.   function fillFaceboxFromHref(href, klass) {
  149.     // div
  150.     if (href.match(/#/)) {
  151.       var url    = window.location.href.split('#')[0]
  152.       var target = href.replace(url,'')
  153.       if (target == '#') return
  154.       $.facebox.reveal($(target).html(), klass)
  155.  
  156.     // image
  157.     } else if (href.match($.facebox.settings.imageTypesRegexp)) {
  158.       fillFaceboxFromImage(href, klass)
  159.     // ajax
  160.     } else {
  161.       fillFaceboxFromAjax(href, klass)
  162.     }
  163.   }
  164.  
  165.   function fillFaceboxFromImage(href, klass) {
  166.     var image = new Image()
  167.     image.onload = function() {
  168.       $.facebox.reveal('<div><img src="' + image.src + '" /></div>', klass)
  169.     }
  170.     image.src = href
  171.   }
  172.  
  173.   function fillFaceboxFromAjax(href, klass) {
  174.     $.get(href, function(data) { $.facebox.reveal(data, klass) })
  175.   }
  176.  
  177.   function skipOverlay() {
  178.     return $.facebox.settings.overlay == false || $.facebox.settings.opacity === null
  179.   }
  180.  
  181.   function showOverlay() {
  182.     if (skipOverlay()) return
  183.  
  184.     if ($('#facebox_overlay').length == 0)
  185.       $("body").append('<div id="facebox_overlay"></div>')
  186.  
  187.     $('#facebox_overlay').hide().addClass("facebox_overlayBG")
  188.       .css('opacity', $.facebox.settings.opacity)
  189.       .click(function() { $(document).trigger('close.facebox') })
  190.       .fadeIn(200)
  191.     return false
  192.   }
  193.  
  194.   function hideOverlay() {
  195.     if (skipOverlay()) return
  196.  
  197.     $('#facebox_overlay').fadeOut(200, function(){
  198.       $("#facebox_overlay").removeClass("facebox_overlayBG")
  199.       $("#facebox_overlay").addClass("facebox_hide")
  200.       $("#facebox_overlay").remove()
  201.     })
  202.  
  203.     return false
  204.   }
  205.  
  206.   $(document).bind('close.facebox', function() {
  207.     $(document).unbind('keydown.facebox')
  208.     $('#facebox').fadeOut(function() {
  209.       $('#facebox .content').removeClass().addClass('content')
  210.       $('#facebox .loading').remove()
  211.       $(document).trigger('afterClose.facebox')
  212.     })
  213.     hideOverlay()
  214.   })
  215.  
  216. })(jQuery);

В facebox.css вставляем следующие:

CSS код:
  1. #facebox {
  2.     position: absolute;
  3.     top: 0;
  4.     left: 0;
  5.     z-index: 100;
  6.     text-align: center;
  7. }
  8. #facebox .popup{
  9.     width: 410px;
  10.     position: fixed;
  11.     border: 3px solid rgba(0,0,0,0);
  12.     -webkit-border-radius: 5px;
  13.     -moz-border-radius: 5px;
  14.     border-radius: 5px;
  15.     -webkit-box-shadow: 0 0 18px rgba(0, 0, 0, 0.71);
  16.     -moz-box-shadow: 0 0 18px rgba(0, 0, 0, 0.71);
  17.     box-shadow: 0 0 18px rgba(0, 0, 0, 0.71);
  18. }
  19. #facebox .content {
  20.     display: table;
  21.     width: 370px;
  22.     padding: 30px 20px 10px;
  23.     background: #fff;
  24.     -webkit-border-radius: 4px;
  25.     -moz-border-radius: 4px;
  26.     border-radius: 4px;
  27. }
  28. #facebox .content > p:first-child{
  29.     margin-top: 0;
  30. }
  31. #facebox .content > p:last-child{
  32.     margin-bottom: 0;
  33. }
  34. #facebox .close{
  35.     position: absolute;
  36.     top: 5px;
  37.     right: 5px;
  38.     padding: 2px;
  39.     background: #fff;
  40. }
  41. #facebox .close img{
  42.     opacity: 0.3;
  43. }
  44. #facebox .close:hover img{
  45.     opacity: 1.0;
  46. }
  47. #facebox .loading {
  48.     text-align: center;
  49. }
  50. #facebox .image {
  51.     text-align: center;
  52. }
  53. #facebox img {
  54.     border: 0;
  55.     margin: 0;
  56. }
  57. #facebox_overlay {
  58.     position: fixed;
  59.     top: 0px;
  60.     left: 0px;
  61.     height: 100%;
  62.     width: 100%;
  63. }
  64. .facebox_hide {
  65.     z-index: -100;
  66. }
  67. .facebox_overlayBG {
  68.     background-color: #000;
  69.     z-index: 99;
  70. }

С эффектом мы закончили.

2. Устанавливаем в шаблон

Теперь нужно полученную папку facebox разместить у себя в шаблоне. Я бросаю её к себе в protostar (путь по умолчанию …/templates/protostar/). Далее открываем файл index.php всё того же шаблона и перед тегом </body> в самом низу страницы вставляем следующее:

HTML код:
  1. <div id="login-modal" style="display:none;">
  2.     <jdoc:include type="modules" name="login" style="none" />
  3. </div>

Здесь мы заключили, пока ещё не созданный, модуль в теги div с идентификатором id="login-modal". А так же скрыли вывод на странице сайта при помощи style="display:none;". Суть в том, что при использовании идентификатора со значением login-modal, скрипт даст команду для вывода на странице, при условии, что кнопка нажата. Этот элемент должен быть скрыт, чтобы форма авторизации всегда возвращалась в положение display:none;.

3. Создаём позицию под модуль

Во втором пункте мы уже добавили модуль в index.php с названием login. Но такой позиции пока не существует в нашем шаблоне. Поэтому открываем файл templateDetails.xml (путь по умолчанию …/templates/protostar/templateDetails.xml) и дописываем следующее:

XML код:
  1. <position>login</position>

Создаём позицию под модуль

После сохраняем, и теперь при добавлении модуля в панели управления появилась позиция login. Это нужно было для того, чтобы в итоге наш модуль авторизации оказался скрытым от всех.

4. Добавляем стили

Таблица стилей, отвечающая за показ всплывающего окна, уже есть в файле facebox.css. Однако стили кнопки ещё не написаны. Поэтому открываем файл template.css (путь по умолчанию …/templates/protostar/css/temlate.css) и дописываем в самом низу это:

CSS код:
  1. #login-button {
  2.     background: #2a6c90;
  3.     border-radius: 0 0 5px 5px;
  4.     color: #f9f9f9;
  5.     display: block;
  6.     font-size: 11pt;
  7.     height: 30px;
  8.     left: 60%;
  9.     line-height: 20pt;
  10.     position: absolute;
  11.     text-align: center;
  12.     top: 0;
  13.     width: 10%;
  14.     text-decoration: none; 
  15. }
  16. #login-button:hover {
  17.     background: #007dbb;
  18. }

5. Делаем кнопку на сайте и подключаем скрипты

Для начала нам понадобиться подключить скрипты. Для этого снова открываем файл index.php шаблона и между тегами <head></head> вставляем этот код:

jQuery код:
  1. <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
  2. <script src="/templates/<?php echo $this->template ?>/facebox/facebox.js"></script>
  3. <link href="/templates/<?php echo $this->template ?>/facebox/facebox.css" rel="stylesheet" type="text/css" />
  4. <script type="text/javascript">
  5.     jQuery(document).ready(function(jQuery) {
  6.       jQuery('a[rel*=facebox]').facebox({
  7.       })
  8.     })
  9. </script>

Здесь подключена библиотека jquery, а так же файлы, созданные и расположенные в папке facebox. Ниже есть небольшой скрипт, без него работать всё, что мы сделали, не будет. Его основная задача определить на странице элементы, имеющие значения rel="facebox" в тегах и сработать по нажатию на них. Если такие элементы есть, а наша кнопка имеет такое значение, то будет открываться скрытый модуль (форма авторизации). На самом деле не обязательно всю эту работу проделывать ради того чтобы создать красивый вход на сайт, это могут быть и другие модули. Кстати, принцип вывода картинок из миниатюр в оригинал тот же самый. То есть, там так же определяется наше значение и скрипт показывает, отличие только в том, что создаётся специальная ссылка с двумя картинками одновременно со значением href=”” вместо кнопки.

Теперь необходимо вставить кнопку. Вы можете делать это где угодно, у меня это сразу после открывающегося тега <body>:

HTML код:
  1. <a id="login-button" href="#login-modal" rel="facebox">Войти</a>

6. Добавляем форму авторизации

Осталось только создать модуль. Открываем панель управления, идём «расширения – менеджер модулей» и нажимаем «создать». Тип модуля выбираем «Вход на сайт». Заполняем заголовок и обязательно выбираем позицию login ранее добавленную в templateDetails.xml. Остальные настройки по желанию, после сохраняемся и открываем сайт для проверки. Вот как должно получиться, если на кнопку нажать:

Добавляем форму авторизации

Заключение

Кнопка входа установлена в верхней части сайта и не подвижка, а вот форма имеет фиксированное положение в зависимости от экрана. То есть в центре по ширине и остаётся в таком положении при скроллинге страницы. Для того чтобы окно скрылось, нажимаем на любое место вне окошка. Стили модуля в этом примере мы не рассматривали. Менять стандартные не правильно, так как при обновлении движка или шаблона всё потеряется (у нас ведь стандартный protostar). В этом случае, лучше создавать копию модуля и менять внешний вид по собственному усмотрению.

 
4.6591760299625 1 1 1 1 1 (Оценок: 267)
4.6591760299625 267
Опубликовано: 12-11-2016

Соседние материалы

<Назад Вперёд>

Вы не зарегистрированы, чтобы оставлять комментарии.