1

我有一个使用 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...

来自 GitHub 的完整源代码

4

5 回答 5

4

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

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

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

希望有帮助...

于 2012-11-29T14:54:56.527 回答
1

我尝试了其余的答案并最终得到：

 .reveal-modal{
    position: fixed; 
 }

似乎工作得很好，仍然可以按照我的意愿进行动画和行为。

于 2013-08-15T20:12:06.903 回答
1

确保您的模式在页面的主要部分之外，而不是在对它们来说是不正确的相对父级的行或列内。

于 2012-08-10T16:09:31.123 回答
0

模态框本身的 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>
于 2012-12-27T20:53:58.280 回答
0

我编写了一个简单的脚本，在页面加载时触发并查找所有显示模式，然后将它们移动到标签之前的空目标 div。通过这种方式，我可以将所有模式保留在我希望它们出现的任何位置，以便标记分离或让其他人更容易遵循/工作。

于 2013-06-04T13:05:11.403 回答