javascript - 基于屏幕的 jquery 中心元素，而不是页面大小

Question

我有一个使用 Zurb 的 Reveal Plugin 显示的元素，我对它如何定位模态窗口有疑问。

它似乎将元素定位在页面的中心，折叠上方。但是，如果模态窗口由折叠下方的链接激活，则用户无法看到该窗口。有没有办法根据当前滚动位置而不是整个页面使元素居中？

据我所知，这是插件的相关源代码:

变量集(ln 41):

var modal    = $(this),
topMeasure = parseInt(modal.css('top'), 10),                                                                                                
topOffset  = modal.height() + topMeasure,                                                                                                   
locked     = false,                                                                                                                         
modalBg    = $('.reveal-modal-bg'),                                                                                                         
closeButton;   

为 Div 设置动画(ln 61)

 function openAnimation() {                                                                                                                    
    if (!locked) {                                                                                                                              
      lockModal();                                                                                                                              
      if (options.animation === "fadeAndPop") {                                                                                                 
        modal.css({                                                                                                                             
            'top': $(document).scrollTop() - topOffset,                                                                                         
            'opacity': 0,                                                                                                                       
            'visibility': 'visible'                                                                                                             
        });                                                                                                                                     
        modalBg.fadeIn(options.animationSpeed / 2);                                                                                             
        modal.delay(options.animationSpeed / 2).animate({                                                                                       
          "top": $(document).scrollTop() + topMeasure + 'px',                                                                                   
          "opacity": 1                                                                                                                          
        }, options.animationSpeed, function () {                                                                                                
          modal.trigger('reveal:opened');                                                                                                       
        });                                                                                                                                     

      }   
      //etc...

Full Source Code From GitHub

Answer 1

我遇到了同样的问题，我意识到我正在使用 href 链接中带有“#”的标签调用显示函数。

调用它会在调用显示功能之前重新加载页面，因此当按下显示按钮时，显示模态的屏幕位置会跳到屏幕的坐标，导致模态屏幕出现在屏幕的一半之外。

从链接中删除这个“#”可​​以解决问题...

希望对您有所帮助...