Question

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

我有一个旋转加载div，而时间是通过ajax在后台加载的。我遇到的问题是，当“动作”发生大约四分之三时，加载div位于页面顶部。这个“动作”部分位于视口中（它是一个移动网站），加载div位于页面顶部 - 远远高于用户视口。

如何将加载div降低以使其始终位于当前视口中？如何使加载div跟在用户当前考虑滚动条的表单中的位置？

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

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

每次页面长度增加时，是否有人提示如何将加载div移动到当前视口区域的中心？

由于

Answer 1

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

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

希望有所帮助

Answer 2

如果您执行此类操作，并将div放在<body>标记内，它将保留在可见区域的中间。

div.loading {
position: fixed;
top: 47%;
left: 47%;
height: 6%;
width: 6%;
z-index: 1000;
}

另一种解决方案是将它放在容器内容的最后将加载到。只需确保在其之前加载内容。如果你给它一个margin:auto;，它将保持在中间并继续向下推。

编辑：值得注意的是答案here。这将防止以用户无法修复的方式掩盖重要内容。

Answer 3

将你的加载div的位置设置为fixed，这当然会导致它从DOM结构中的父级中逃脱，然后你需要将它放在你想要的位置。固定定位相对于视口的可见区域。

<html>
<head>
<style type="text/css">
    #loader {
        height: 30px;
        position: fixed;
        top: 50%;
        left: 50%;
        background: #ccc;
    }
</style>
</head>
<body>
   <div id="loader">Loading...</div>
</body>
</html>

这将导致加载器div始终在屏幕上居中，无论用户在哪里滚动，向左/向右/向上/向下。

在加载ajax内容时将加载div移动

3 个答案: