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

我有一个使用Zurb的元素，我对它如何定位模态窗口有一个问题

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

以下是，据我所知，插件的相关源代码：

变量集（第41层）：

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

设置Div动画（第61层）

---

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

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

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

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

从链接中删除此“#”会立即解决问题

---

希望这能有所帮助……

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

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

从链接中删除此“#”会立即解决问题

---

希望这会有所帮助……

您的modals div本身是否在row/column 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>

我的情态

模态的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>

我的情态

我编写了一个简单的脚本，在页面加载时启动，查找所有的reveal modals，然后将它们移动到标签前面的空目标div。这样我就可以把我所有的modals放在我想要的地方，以便于标记分离，或者让其他人更容易跟随/操作。

我编写了一个简单的脚本，在页面加载时启动并查找所有的reveal modals，然后将它们移到标记前的空目标div。这样，我就可以把我所有的情态动词都放在我想要的地方，以便于标记分离，或者让其他人更容易理解和使用。

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

 .reveal-modal{
    position: fixed; 
 }

---

似乎工作得很好，仍然像我所希望的那样进行动画和行为。

我尝试了其余的答案，结果是：

 .reveal-modal{
    position: fixed; 
 }

---

看起来工作很好，仍然像我希望的那样进行动画和行为。

实际上插件会处理这个问题：

$（文档）。scrollTop（）

获得位置，用户滚动到：我猜你的站点上还有一些其他冲突…实际上插件会处理：

$（文档）。scrollTop（）

获取位置后，用户滚动到：我猜您的站点上还有其他冲突。。。