html - CSS样式加载消息

Question

我正在使用 ajax 加载一些内容。我对此没有问题，我只是想知道如何在屏幕中央设置“正在加载...”消息的样式，或者最好使用加载程序图像。加载内容时，“正在加载”消息出现在左上角(使整个页面变黑)，看起来不太好。我想知道是否可能。

  $.ajax({
   type: "POST",
   url: "page1.php", 
   beforeSend: function () {
  $("#content").html('loading...');
    },
   data: "Id="+Id,
   success: function(msg){
     $("#content").html(msg);
   }
   });

#content 是页眉下方(右侧)的包装 div，包含导航菜单的页眉样式设置为向左浮动，垂直对齐且宽度为 250 像素。模板是 1200 X 700.. 我试图用 #loader div 包装 #content 但它不起作用.. 任何建议都将受到赞赏。谢谢

Answer 1

我会在执行请求时向“加载”添加一个 id，并让 css 处理它:

  $.ajax({
   type: "POST",
   url: "page1.php", 
   beforeSend: function () {
    $("#loading").addClass("activated");
    },
   data: "Id="+Id,
   success: function(msg){
     $("#loading").removeClass("activated");
     $("#content").html(msg);
   }
   });

使用 css 居中元素:

Quick CSS Trick: How To Center an Object Exactly In The Center .