如何使用 Twitter 引导程序 3 使等待图标出现在我的页面中间

How can I make a waiting icon appear in the middle of my page with twitter bootstrap 3?

本文关键字：我的 中间 图标 Twitter 何使用 引导程序 等待      更新时间：2023-09-26

我浏览了所有文档，但仍然找不到示例。我想做的是在执行Ajax调用时在我的页面中显示一个等待图标。有人可以告诉我如何使用推特引导程序做到这一点。

另外，如果还有其他更好的非jquery实现，我也想知道这些。

谢谢。

只需从 font-awesome 中选择一个加载图标 （gif） 即可引导，

  1. 在 Ajax 调用之前显示
  2. 在 AJAX 响应传递后隐藏

要将图标放置在屏幕中间，请使用以下 css

.ajaxLoader {
   position: absolute;
   top: 50%;
   left: 50%;
   width: 500px;
   height: 500px;
   margin-top: -250px; /* Half the height */
   margin-left: -250px; /* Half the width */
}
  1. 另请查看按钮加载图像
  2. JSFiddle

如果你想要一些死点，你可以使用绝对位置技术。

为此，请创建一个div 并为其提供以下属性：

margin:auto;
position:absolute;
top:0;left:0;bottom:0;right:0;
width:<however wide the image is>;
height:<however big the image is>;

无论何时有人调整屏幕大小，这都会使其处于中心位置，使其适用于手机和台式机（只要图像不是很大）。

如果您希望它在另一个div 中工作，请确保父级position:relative;

  • 您可以添加带有等待徽标的引导模式，
  • 解绑关闭事件，
  • 并在 ajax 调用结束时关闭模式...
相关文章：