Question

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

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

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

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

Answer 2

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

来自Jquery网站：

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

如何使html无效并显示加载gif

2 个答案: