Question

问题是当我停止滚动时我的模态的位置不在页面当前所在的位置。

我一直关注并改进this tutorial。

打电话很容易！这部分在我的页面中;

$('.paulund_modal_2').paulund_modal_box({
    title:'Second Title Box',
    description:'PHP content resides here...',
});

从顶部开始，只需添加;
```
top: 'NUMpx',
```
或
```
top: 'NUM%',
```

我最近添加了一个停止页面滚动事件，当您单击打开模式时我会调用该事件。这意味着我需要设置最小顶部位置;

var top = $('html').offset().top;

然而设置;

top: top + 'px',

没有任何效果。

完整脚本.JS

(function($){

    // Defining our jQuery plugin
    $.fn.paulund_modal_box = function(prop){

    // left: 37, up: 38, right: 39, down: 40,
    // spacebar: 32, pageup: 33, pagedown: 34, end: 35, home: 36
    var keys = [37, 38, 39, 40];

        function preventDefault(e) {
          e = e || window.event;
          if (e.preventDefault)
              e.preventDefault();
          e.returnValue = false;  
        }

        function keydown(e) {
            for (var i = keys.length; i--;) {
                if (e.keyCode === keys[i]) {
                    preventDefault(e);
                    return;
                }
            }
        }

        function wheel(e) {
          preventDefault(e);
        }

        function disable_scroll() {
          if (window.addEventListener) {
              window.addEventListener('DOMMouseScroll', wheel, false);
          }
          window.onmousewheel = document.onmousewheel = wheel;
          document.onkeydown = keydown;
        }

        function enable_scroll() {
            if (window.removeEventListener) {
                window.removeEventListener('DOMMouseScroll', wheel, false);
            }
            window.onmousewheel = document.onmousewheel = document.onkeydown = null;  
        }

        var top = $('html').offset().top;

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

        return this.click(function(e){
            var top = $('html').offset().top;
            alert(top);
            e.preventDefault();
            disable_scroll();
            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',
                'overflow':'hidden'
            });
            $('.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(){
                event.preventDefault();
                $(this).parent().fadeOut().remove();
                $('.paulund_block_page').fadeOut().remove();                 
             });
        }

        return this;
    };

})(jQuery);

Answer 1

发现以下内容并没有从顶部找到位置;

var top = $('html').offset().top;

我深入挖掘答案，发现以下情况有效;

$(window).scrollTop();

我在click事件之外定义了from_top以使其成为全局，然后在点击设置它并在样式部分添加变量和hey-presto！

设置顶部位置，同时模态可见

1 个答案: