Question

我有这段代码：

$("#result").html('<div class="loading">Loading results...</div>');
$("#result").load('<?php bloginfo('template_directory'); ?>/GetResults.php?' + $.cookie('nw-query'));

它显示加载div，直到加载完成。我想在这里做什么，我想将加载div完全放在页面/文档的中心？

这是额外的，但可能很好 - 我可以淡化文档，直到加载完成，以便加载div突出？

欢迎任何jquery / css建议。

谢谢：）

Answer 1

如果你理解正确的问题：你需要弄清楚如何水平和垂直居中加载div？如果是这样，我会看看这个问题的答案：Practical solution to center vertically and horizontally in HTML that works in FF, IE6 and IE7。

Answer 2

你看过jQueryUI吗？您可以使用模态对话框。 jQueryUi自动居中模式对话框，您可以在加载完成后使对话框消失。有一种方法可以从对话框中删除标题栏： http://www.comanswer.com/question/jquery-ui-dialog-how-to-initialize-without-a-title-bar

我不知道这是否是您正在寻找的东西，但它可能会避免让您在以后的某些方面感到头疼（而且它很漂亮，您可以拥有自定义主题）。

Answer 3

你可以在你的装货上放一个中心div ......

$("#result").html('<div align="center" style="width:100%"><div class="loading">Loading results...</div></div>');

Answer 4

.loading {
    width:200px;
    height:50px;
    background:#CCC;
    position:absolute;
    top:50%;
    left:50%;
    margin:-25px 0 0 -100px; /* Half of height and width */
    }

如果您不知道宽度/高度或它是动态的，您可以使用.width（）和.height（）函数来获取值，该值应除以2.

Answer 5

这可能有点过度杀戮，但jQuery UI dialog插件可以实现这些效果（你不会将它用于对话框......）。查看模态选项和示例。如果你已经使用jQuery ui，可能是值得的......

如何使用jQuery在load（）之前将加载div居中？

5 个答案: