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链接中带有“＃”的标签调用reveal函数。

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

从链接中删除此“＃”将问题排除在外......

希望有帮助...

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>

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

来自documentation：

请记住：您的模式应位于页面的末尾，位于任何行或列之后。

以下代码可以正常运行：

<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。通过这种方式，我可以将所有模态保留在我想要的位置，以便进行标记分离，或者让其他人更容易遵循/继续工作。

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

5 个答案: