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

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

Часто при верстке разных проектов возникают однообразные задачи, одна из таких задач это всплывающее окно входа/авторизации. Для этой задачи у меня есть свой простой мини jQuery-плагин, который я и использую.

Особенности:

  • показ/скрытие окна при клике по ссылке (target, обычно «войти»);
  • скрытие окна при клике вне его области;
  • скрытие окна при клике по крестику;
  • скрытие по нажатию Escape;
  • ~30 строк коду.

Инициализация плагина

Для инициализации плагина нам достаточно вызвать его таким образом:

$('#togglePopup').loginPopup($('#popup'));

Здесь $('#togglePopup') – это элемент, при клике по которому будет показано всплывающее окно авторизации $('#popup').

$(document).ready(function(){
    $('#togglePopup').loginPopup($('#popup'));
});

HTML для всплывающего окна

Моя идеология такова: всё что касается отображения верстки(того как выглядит верстка) нужно вынести в CSS, а при помощи JavaScript менять только классы или управлять видимостью. Для всплывающих окон авторизации я использую вот такую верстку-каркас:

<div class="b-login">
    <a class="b-login__link" href="#toLoginPage" id="togglePopup">Войти</a>
    <div class="b-login__popup" id="popup">
        <!-- Здесь верстка содержимого контента -->
    </div>
</div>

Также я придерживаюсь мнения, что узлы одного функционального элемента нужно стараться обернуть в один блок, как я это сделал в примере выше, обернув блок с окном авторизации и ссылку открывающую это окно в один блок <div class="b-login/>. Не буду приводить всю верстку страницы, её вы можете посмотреть в демо-примере или скачав пример.

Код плагина

Я снабдил код плагина комментариями ключевых моментов, поэтому не буду расписывать более подробно:

(function($, window) {
    $.fn.loginPopup = function($popup) {
        var $self = this,
            $window = $(window);
 
        return this.toggle(
            function() {
                $popup.show().bind('click.bLogin', function(event){
                    // предотвращаем всплытие события, 
                    // т.е. не даем закрыться попапу(см.ниже)
                    event.stopPropagation();
                });
                // скрываем попап если:
                $window.bind('click.bLogin', function(){
                    // до window "прошел" click
                    $self.trigger('click');
                }).bind('keydown.bLogin', function(event){
                        // нажали Escape
                        if(event.keyCode === 27){
                            $self.trigger('click')
                        }
                    });
                return false;
            },
            function(){
                // прячем попап
                $popup.hide().unbind('.bLogin');                
                $window.unbind('.bLogin');
                return false;
            }
        );
    };
})(jQuery, window);

Скачать исходники

Анимация

Для тех, кому хочется добавить анимации, может модифицировать плагин заменив, в строчках 8 и 27 show() и hide() соответственно на методы jQuery slideDown() / slideUp()fadeIn() / fadeOut() / fadeTo() или при помощи animate().

На последок приведу пример с fade’ом (внимание на строки 8 и 27):

(function($, window) {
    $.fn.loginPopup = function($popup) {
        var $self = this,
            $window = $(window);
 
        return this.toggle(
            function() {
                $popup.stop(true,true).fadeIn(300).bind('click.bLogin', function(event){
                    // предотвращаем всплытие события,
                    // т.е. не даем закрыться попапу(см.ниже)
                    event.stopPropagation();
                });
                // скрываем попап если:
                $window.bind('click.bLogin', function(){
                    // до window "прошел" click
                    $self.trigger('click');
                }).bind('keydown.bLogin', function(event){
                        // нажали Escape
                        if(event.keyCode === 27){
                            $self.trigger('click')
                        }
                    });
                return false;
            },
            function(){
                // прячем попап
                $popup.fadeOut(300).unbind('.bLogin');
                $window.unbind('.bLogin');
                return false;
            }
        );
    };
})(jQuery, window);

Скачать исходники с анимацией

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

Ваш адрес email не будет опубликован.