jQuery中心元素基于屏幕，而不是页面大小

Question

我有一个使用Zurb的Reveal插件揭示的元素，并且我对如何放置模式窗口有疑问。

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

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

变量集（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...

来自GitHub的完整源代码

Answer 1

我遇到了同样的问题，我意识到我在带有href链接中带有“＃”标记的标签中调用了show函数。

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

从链接中删除此“＃”可以立即解决问题...

希望有帮助...

Answer 2

确保模态在页面主要部分的外部，而不是在行或列的内部，这对它们而言是不正确的相对父代。

Answer 3

我尝试了其余答案，最后得到：

 .reveal-modal{
    position: fixed; 
 }

似乎可以正常工作，仍然可以按照我希望的方式进行动画处理和表现。

Answer 4

您的div本身是否位于行/列div块中？

例：

<div class="row">
  <div class="twelve columns">
    <div id="featured"><a href="" data-reveal-id="viewModal">View My Modal</a></div>
    <div id="viewModal" class="reveal-modal large">My Modal</div>
  </div>
</div>

如果是这种情况，可能会发生您描述的行为。

从文档中 ：

切记 ：模态应该在页面的末尾，在任何行或列之后。

下面的代码可以正常工作：

<div class="row">
  <div class="twelve columns">
    <div id="featured"><a href="" data-reveal-id="viewModal">View My Modal</a></div>
  </div>
</div>

<div id="viewModal" class="reveal-modal large">My Modal</div>

Answer 5

我编写了一个简单的脚本，该脚本在页面加载时触发并查找所有显示模式，然后将其移动到标记之前的空目标div中。 这样，我可以将所有模态保留在我想要的任何位置，以便于标记分离或使其他人更容易跟随/工作。