AJAX怎么顯示加載中并彈出圖層遮擋頁面

這篇文章給大家分享的是有關AJAX怎么顯示加載中并彈出圖層遮擋頁面的內容。小編覺得挺實用的，因此分享給大家做個參考，一起跟隨小編過來看看吧。

實現方法

HTML部分：

<div id="loading" class="loadingdiv"> 
    <img src="images/data-loading.gif" alt="圖片加載中···" /> 
</div>

HTML部分只需要放置一個div，里面包含一個img。

CSS樣式：

/*圖片加載中div圖層，用于遮擋頁面*/ 
.loadingdiv 
{ 
  position:absolute; 
  text-align:center; 
  left:0px; 
  top:0px; 
  z-index:70; 
  background-color:#000000; 
  opacity: 0.7;/*透明#CCCCCC*/ 
  display:none; 
  }   
/*加載中圖片*/ 
.loadingdiv img 
{ 
  position:absolute; 
  left:0px; 
  top:0px; 
  z-index:80; 
  }

對div和img進行樣式設置。

JS代碼

//ajax請求過程中，顯示加載中圖片并顯示圖層，請求完成隱藏圖片 
$(function () { 
  //注冊ajax加載事件 
  $("#loading").ajaxStart(function () { 
    //一個div，用來遮擋頁面，請求過程中，不可操作頁面 
    var lockwin = $(this); 
    //div占滿整個頁面 
    lockwin.css("width", "100%"); 
    lockwin.css("display", "block"); 
    lockwin.css("height", $(window).height() + $(window).scrollTop()); 
    //設置圖片居中 
    $("#loading img").css("display", "block"); 
    $("#loading img").css("left", ($(window).width() - 88) / 2); 
    $("#loading img").css("top", ($(window).height() + $(window).scrollTop()) / 2); 
  }); 
 
  $("#loading").ajaxStop(function () { 
    //隱藏div 
    var lockwin = $(this); 
    lockwin.css("width", "0"); 
    lockwin.css("display", "none"); 
    lockwin.css("height", "0"); 
    //設置圖片隱藏 
    $("#loading img").css("display", "none"); 
  }); 
});

感謝各位的閱讀！關于“AJAX怎么顯示加載中并彈出圖層遮擋頁面”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，讓大家可以學到更多知識，如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！