Пользовательский плагин лайтбокса Jquery - PullRequest
Новая
       21

Пользовательский плагин лайтбокса Jquery

0 голосов
/ 17 февраля 2012

Это мой первый плагин, который пытается создать, используя приведенный пример здесь .

Теперь в примере есть ссылка, где мы можем закрыть лайтбокс, нажав на него.Но я хочу знать, как мне закрыть его, щелкнув фоном (т. Е. Где-нибудь на веб-странице)

Это то, что я пробовал, но это не сработало.Кто-нибудь может сказать мне, где я ошибся?

Редактировать: Это полный плагин: 

    (function($){

    // Defining our jQuery plugin

    $.fn.paulund_modal_box = function(prop){

        // Default parameters

        var options = $.extend({
            height : "250",
            width : "500",
            title:"JQuery Modal Box Demo",
            description: "Example of how to create a modal box.",
            top: "20%",
            left: "30%",
        },prop);

        return this.click(function(e){
            add_block_page();
            add_popup_box();
            add_styles();

            $('.paulund_modal_box').fadeIn();
        });

         function add_styles(){
            $('.paulund_modal_box').css({
                'position':'absolute',
                'left':options.left,
                'top':options.top,
                'display':'none',
                'height': options.height + 'px',
                'width': options.width + 'px',
                'border':'1px solid #fff',
                'box-shadow': '0px 2px 7px #292929',
                '-moz-box-shadow': '0px 2px 7px #292929',
                '-webkit-box-shadow': '0px 2px 7px #292929',
                'border-radius':'10px',
                '-moz-border-radius':'10px',
                '-webkit-border-radius':'10px',
                'background': '#f2f2f2',
                'z-index':'50',
            });
            $('.paulund_modal_close').css({
                'position':'relative',
                'top':'-25px',
                'left':'20px',
                'float':'right',
                'display':'block',
                'height':'50px',
                'width':'50px',
                'background': 'url(images/close.png) no-repeat',
            });
                        /*Block page overlay*/
            var pageHeight = $(document).height();
            var pageWidth = $(window).width();

            $('.paulund_block_page').css({
                'position':'absolute',
                'top':'0',
                'left':'0',
                'background-color':'rgba(0,0,0,0.6)',
                'height':pageHeight,
                'width':pageWidth,
                'z-index':'10'
            });
            $('.paulund_inner_modal_box').css({
                'background-color':'#fff',
                'height':(options.height - 50) + 'px',
                'width':(options.width - 50) + 'px',
                'padding':'10px',
                'margin':'15px',
                'border-radius':'10px',
                '-moz-border-radius':'10px',
                '-webkit-border-radius':'10px'
            });
        }

         function add_block_page(){
            var block_page = $('<div class="paulund_block_page"></div>');

            $(block_page).appendTo('body');
        }

         function add_popup_box(){
             var pop_up = $('<div class="paulund_modal_box"><a href="#" class="paulund_modal_close"></a><div class="paulund_inner_modal_box"><h2>' + options.title + '</h2><p>' + options.description + '</p></div></div>');
             $(pop_up).appendTo('.paulund_block_page');

             $('.paulund_modal_close').click(function(){
                $(this).parent().fadeOut().remove();
                $('.paulund_block_page').fadeOut().remove();
             });
        }

        return this;
     };
 $('.paulund_block_page').click(function(){
       $(pop_up).fadeOut(function(){$(this).remove();});
       $('.paulund_block_page').fadeOut(function(){$(this).remove();});
});
})(jQuery);

1 Ответ

1 голос
/ 17 февраля 2012

В этом плагине есть опечатка, которая не дает мне работать.

В одной из строк написано 

'height':pageheight

, когда должно появиться 

'height':pageHeight

(используйте заглавную букву h)

Если вы вставите свой код в нижнюю часть функции add_popup_box, она будет работать нормально.Однако затухание не завершается (оно просто исчезает).Кроме того, вы забыли код для удаления страницы блока при нажатии на фон.

Попробуйте сделать следующее: 

$('.paulund_block_page').click(function(){
    $(pop_up).fadeOut(function(){$(this).remove();});
    $('.paulund_block_page').fadeOut(function(){$(this).remove();});
});

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

Обновление: вы добавляли код в неправильное место.Вот как должен выглядеть плагин: 

(function($){

    // Defining our jQuery plugin

    $.fn.paulund_modal_box = function(prop){

        // Default parameters

        var options = $.extend({
            height : "250",
            width : "500",
            title:"JQuery Modal Box Demo",
            description: "Example of how to create a modal box.",
            top: "20%",
            left: "30%",
        },prop);

        return this.click(function(e){
            add_block_page();
            add_popup_box();
            add_styles();

            $('.paulund_modal_box').fadeIn();
        });

         function add_styles(){
            $('.paulund_modal_box').css({
                'position':'absolute',
                'left':options.left,
                'top':options.top,
                'display':'none',
                'height': options.height + 'px',
                'width': options.width + 'px',
                'border':'1px solid #fff',
                'box-shadow': '0px 2px 7px #292929',
                '-moz-box-shadow': '0px 2px 7px #292929',
                '-webkit-box-shadow': '0px 2px 7px #292929',
                'border-radius':'10px',
                '-moz-border-radius':'10px',
                '-webkit-border-radius':'10px',
                'background': '#f2f2f2',
                'z-index':'50',
            });
            $('.paulund_modal_close').css({
                'position':'relative',
                'top':'-25px',
                'left':'20px',
                'float':'right',
                'display':'block',
                'height':'50px',
                'width':'50px',
                'background': 'url(images/close.png) no-repeat',
            });
                        /*Block page overlay*/
            var pageHeight = $(document).height();
            var pageWidth = $(window).width();

            $('.paulund_block_page').css({
                'position':'absolute',
                'top':'0',
                'left':'0',
                'background-color':'rgba(0,0,0,0.6)',
                'height':pageHeight,
                'width':pageWidth,
                'z-index':'10'
            });
            $('.paulund_inner_modal_box').css({
                'background-color':'#fff',
                'height':(options.height - 50) + 'px',
                'width':(options.width - 50) + 'px',
                'padding':'10px',
                'margin':'15px',
                'border-radius':'10px',
                '-moz-border-radius':'10px',
                '-webkit-border-radius':'10px'
            });
        }

         function add_block_page(){
            var block_page = $('<div class="paulund_block_page"></div>');

            $(block_page).appendTo('body');
        }

         function add_popup_box(){
             var pop_up = $('<div class="paulund_modal_box"><a href="#" class="paulund_modal_close"></a><div class="paulund_inner_modal_box"><h2>' + options.title + '</h2><p>' + options.description + '</p></div></div>');
             $(pop_up).appendTo('.paulund_block_page');

             $('.paulund_modal_close').click(function(){
                $(this).parent().fadeOut(function(){$(this).remove();});
                $('.paulund_block_page').fadeOut(function(){$(this).remove();});
             });

             $('.paulund_block_page').click(function(){
                 $(pop_up).fadeOut(function(){$(this).remove();});
                 $('.paulund_block_page').fadeOut(function(){$(this).remove();});
             });
        }

        return this;
     };
})(jQuery);
...