javascript - 如何使 html 处于非事件状态并显示正在加载的 gif

Question

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

输入后，点击“注册”按钮，此时我想要的是使实际弹出窗口的 html 内容处于非事件状态，并在加载 gif 图标的中间显示，直到我得到 ajax 响应。

例如代码:

<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('<img src=\'/static/img/modalloader.gif\'/>');

但它没有将背景 html 元素设置为非事件状态，它正在删除所有内容并且大模态变得与加载 gif 图标的大小一样小..

我该怎么做？

Answer 1

我遇到了很多浏览器问题(尤其是移动浏览器)，在内容上放置一个具有绝对位置的模态，所以我所做的是设置一个内容容器和一个等待的 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>

---

在 CSS 中

.hidden{display: none !important;}

---

和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');
}

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