javascript - 在加载 ajax 内容时向下移动加载 div

Question

我为移动网站创建的表单显示了基于之前选择的新字段。即 - 用户从下拉菜单(日期)中选择和选项，然后根据所选日期显示一系列时间。在选择日期之前不会显示时间。

我有一个旋转的加载 div，而时间是通过 ajax 在后台加载的。我遇到的问题是，当“ Action ”发生在向下四分之三的地方时，加载 div 位于页面顶部。这个“ Action ”部分位于视口(viewport)(这是一个移动网站)中，加载 div 位于页面顶部 - 远高于用户视口(viewport)。

如何降低加载 div，使其始终位于当前视口(viewport)中？如何使加载 div 跟随用户当前考虑滚动条的表单中的位置？

我一直在尝试使用垂直居中的 html/CSS 模型，如下所述: http://www.jakpsatweb.cz/css/css-vertical-center-solution.html

但它不起作用，并且当单击表单元素时，页面中心似乎不会在每个事件中更新。我想我需要使用表单字段的焦点或模糊事件来更新它并重新评估，但我似乎无法让它工作。

有没有人有任何关于如何在每次页面长度增加时将加载 div 移动到当前视口(viewport)区域中心的提示？

Answer 1

如果您的加载 div 设计为位于文档流内 - 例如表单内的新内容 block - 最好使用 jQuery 将加载 div 插入内容本身。否则很难将其定位为像素完美。

如果加载 div 显示为文档的叠加层，那么您可以使用具有高 z-index 的 fixed CSS 定位。要使其在所有屏幕分辨率上居中，请使用 jQuery 和公式 (window.height() - div.height())/2 作为顶部像素位置。代码类似于 this answer .

希望对你有帮助