Javascript 如何使html处于非活动状态并显示加载的gif

我有一个模式，当你点击注册按钮时会弹出

输入后，点击“注册”按钮，此时我想让实际弹出的HTML内容不活跃，并显示在中间加载GIF图标，直到获得Ajax响应。p> e、 g.代码：

<div class="modal" id="mymodal">
  <div id="modalcontent">
   <div id="modalhead"> </div>
   <div id="modalbody"> </div>
   <div id="modalfooter"> </div>
  </div>
</div>

js:

$（'#modalcontent'）.html（''）；

但它并没有将背景html元素设置为非活动状态，而是删除了所有内容，而大模式正变得和加载gif图标的大小一样小

---

我该怎么做

您可以使用ajaxStart方法显示加载程序

例如，从Jquery网站：

$( document ).ajaxStart(function() {
  $( "#loading" ).show();
});

---

在内容上放置带有绝对位置的模式时，我遇到了很多浏览器问题（尤其是移动浏览器），所以我要做的是设置一个内容容器和一个等待的gif容器

<div id='content'>
  <!-- whatever you want to show on your site -->
</div>
<div id='loading' class='hidden'>
  <div class="modal" id="mymodal">
    <div id="modalcontent">
      <div id="modalhead"> </div>
      <div id="modalbody"> </div>
      <div id="modalfooter"> </div>
    </div>
  </div>
</div>

---

和js：

//onlaoad function yadayadayada {

  // (...whatever way you trigger the request...)
  showLoading();
  $.ajax(url: //Idontknow,
         success: //handle it here or in complete,
         error: //handle it here or in complete,
         complete: function(){
           hideLoading();
         });

  // some more whatever

// end of onload function }

function showLoading(){
  $('#content').addClass('hidden');
  $('#loading').removeClass('hidden');
}

function hideLoading(){
  $('#content').removeClass('hidden');
  $('#loading').addClass('hidden');
}

---

做所有的隐藏和显示似乎有点奇怪，但由于我一直在努力使用浏览器，这些浏览器以任何理智的人都会期望的不同方式处理绝对定位元素，我发现这是避免遇到问题的最简单、最直接的方法。

添加一个具有绝对位置和窗口大小的模式bg div；把这个放在内容的顶部，然后是模态-具有更大的z索引。

.hidden{display: none !important;}

//onlaoad function yadayadayada {

  // (...whatever way you trigger the request...)
  showLoading();
  $.ajax(url: //Idontknow,
         success: //handle it here or in complete,
         error: //handle it here or in complete,
         complete: function(){
           hideLoading();
         });

  // some more whatever

// end of onload function }

function showLoading(){
  $('#content').addClass('hidden');
  $('#loading').removeClass('hidden');
}

function hideLoading(){
  $('#content').removeClass('hidden');
  $('#loading').addClass('hidden');
}