html - 如何改进在请求期间显示微调器的叠加层和模式？

Question

我有一个覆盖和模式，在使用 Ajax 的长请求期间显示一个微调器。但是当加载器在请求期间显示时，它会丢失它的position: fixed;css 属性。所以用户可以向下滚动并查看下面的内容。我怎样才能防止这种情况？我还尝试在两者之间添加一个 div 以防止用户在处理请求时单击覆盖下方的按钮，但也没有成功。有关如何改进的任何提示？这是html：

<div class="Progress" style="display:none" aria-hidden="true" role="dialog">
    <div class="overlay"></div>
    <div class="modal" role="document" tabindex="-1">
        <h3>{% trans 'Please wait...' %}</h3>
        <div id="spinner">
            <div class="lds-css ng-scope">
                <div class="lds-spinner" style="width:100%;height:100%">
                    <div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
                </div>
            </div>
        </div>
    </div>
</div>

和相关的CSS：

.Progress {
  height: 100%;
  width: 100%;
  position: fixed;
  z-index:1000;
}

.overlay {
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background: #fff;
  text-align: center;
  position: fixed;
  z-index:1001;
  -moz-opacity: 0.75;
  filter: alpha(opacity=75);
  float: none;
}

.modal {
  width: 20rem;
  padding: 16px;
  top:40%;
  position: relative;
  z-index:1002;
  overflow: auto;
  text-align: center;
  margin: auto;
  float: none;
h3{
  font-family: helvetica;
  font-size:1.5rem;
  text-align: center;
  margin:0;
}
p{
  font-family: helvetica;
  font-size:1.5rem;
  color: #000;
  margin:0;
}}

#spinner {
  height: 5rem;
  width: 5rem;
  margin:auto;
  float:none;
}

如果您需要更多信息，请告诉我。

标签： htmlcss

Answer 1

在显示微调器和叠加层的函数中，您还可以向正文添加一个类：

.bodyNoScroll {max-height:100vh;overflow:hidden;}

然后，当您隐藏微调器和叠加层时，从正文中删除该类

$('body').removeClass('bodyNoScroll');

$('body').addClass('noScroll');
$('#msg, #olay').fadeIn(1500);

$('button').click(function(){
  $('#msg, #olay').fadeOut();
  $('body').removeClass('noScroll');
});

#msg, #olay{position:absolute;}
#msg{position:5vh;left:15vh;padding:30px;background:wheat;font-size:1.3rem;z-index:2;display:none;}
#olay{top:0;left:0;width:98vw;height:98vh;background:black;opacity:0.5;z-index:1;display:none;}

.noScroll{max-height:99vh;overflow:hidden;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>

<div id="msg">Spinner!<button>Close</button></div>
<div id="olay"></div>

<p>Once upon a midnight dreary, while I pondered weak and weary, over many a curious bit of ECMA-script 2017...</p>
<p>Once upon a midnight dreary, while I pondered weak and weary, over many a curious bit of ECMA-script 2017...</p>
<p>Once upon a midnight dreary, while I pondered weak and weary, over many a curious bit of ECMA-script 2017...</p>
<p>Once upon a midnight dreary, while I pondered weak and weary, over many a curious bit of ECMA-script 2017...</p>
<p>Once upon a midnight dreary, while I pondered weak and weary, over many a curious bit of ECMA-script 2017...</p>
<p>Once upon a midnight dreary, while I pondered weak and weary, over many a curious bit of ECMA-script 2017...</p>
<p>Once upon a midnight dreary, while I pondered weak and weary, over many a curious bit of ECMA-script 2017...</p>
<p>Once upon a midnight dreary, while I pondered weak and weary, over many a curious bit of ECMA-script 2017...</p>
<p>Once upon a midnight dreary, while I pondered weak and weary, over many a curious bit of ECMA-script 2017...</p>
<p>Once upon a midnight dreary, while I pondered weak and weary, over many a curious bit of ECMA-script 2017...</p>
<p>Once upon a midnight dreary, while I pondered weak and weary, over many a curious bit of ECMA-script 2017...</p>
<p>Once upon a midnight dreary, while I pondered weak and weary, over many a curious bit of ECMA-script 2017...</p>
<p>Once upon a midnight dreary, while I pondered weak and weary, over many a curious bit of ECMA-script 2017...</p>
<p>Once upon a midnight dreary, while I pondered weak and weary, over many a curious bit of ECMA-script 2017...</p>
<p>Once upon a midnight dreary, while I pondered weak and weary, over many a curious bit of ECMA-script 2017...</p>
<p>Once upon a midnight dreary, while I pondered weak and weary, over many a curious bit of ECMA-script 2017...</p>
<p>Once upon a midnight dreary, while I pondered weak and weary, over many a curious bit of ECMA-script 2017...</p>
<p>Once upon a midnight dreary, while I pondered weak and weary, over many a curious bit of ECMA-script 2017...</p>
<p>Once upon a midnight dreary, while I pondered weak and weary, over many a curious bit of ECMA-script 2017...</p>
<p>Once upon a midnight dreary, while I pondered weak and weary, over many a curious bit of ECMA-script 2017...</p>
<p>Once upon a midnight dreary, while I pondered weak and weary, over many a curious bit of ECMA-script 2017...</p>
<p>Once upon a midnight dreary, while I pondered weak and weary, over many a curious bit of ECMA-script 2017...</p>
<p>Once upon a midnight dreary, while I pondered weak and weary, over many a curious bit of ECMA-script 2017...</p>
<p>Once upon a midnight dreary, while I pondered weak and weary, over many a curious bit of ECMA-script 2017...</p>
<p>Once upon a midnight dreary, while I pondered weak and weary, over many a curious bit of ECMA-script 2017...</p>
<p>Once upon a midnight dreary, while I pondered weak and weary, over many a curious bit of ECMA-script 2017...</p>
<p>Once upon a midnight dreary, while I pondered weak and weary, over many a curious bit of ECMA-script 2017...</p>
<p>Once upon a midnight dreary, while I pondered weak and weary, over many a curious bit of ECMA-script 2017...</p>
<p>Once upon a midnight dreary, while I pondered weak and weary, over many a curious bit of ECMA-script 2017...</p>
<p>Once upon a midnight dreary, while I pondered weak and weary, over many a curious bit of ECMA-script 2017...</p>
<p>Once upon a midnight dreary, while I pondered weak and weary, over many a curious bit of ECMA-script 2017...</p>
<p>Once upon a midnight dreary, while I pondered weak and weary, over many a curious bit of ECMA-script 2017...</p>
<p>Once upon a midnight dreary, while I pondered weak and weary, over many a curious bit of ECMA-script 2017...</p>
<p>Once upon a midnight dreary, while I pondered weak and weary, over many a curious bit of ECMA-script 2017...</p>
<p>Once upon a midnight dreary, while I pondered weak and weary, over many a curious bit of ECMA-script 2017...</p>
<p>Once upon a midnight dreary, while I pondered weak and weary, over many a curious bit of ECMA-script 2017...</p>
<p>Once upon a midnight dreary, while I pondered weak and weary, over many a curious bit of ECMA-script 2017...</p>
<p>Once upon a midnight dreary, while I pondered weak and weary, over many a curious bit of ECMA-script 2017...</p>
<p>Once upon a midnight dreary, while I pondered weak and weary, over many a curious bit of ECMA-script 2017...</p>
<p>Once upon a midnight dreary, while I pondered weak and weary, over many a curious bit of ECMA-script 2017...</p>
<p>Once upon a midnight dreary, while I pondered weak and weary, over many a curious bit of ECMA-script 2017...</p>
<p>Once upon a midnight dreary, while I pondered weak and weary, over many a curious bit of ECMA-script 2017...</p>
<p>Once upon a midnight dreary, while I pondered weak and weary, over many a curious bit of ECMA-script 2017...</p>
<p>Once upon a midnight dreary, while I pondered weak and weary, over many a curious bit of ECMA-script 2017...</p>
<p>Once upon a midnight dreary, while I pondered weak and weary, over many a curious bit of ECMA-script 2017...</p>
<p>Once upon a midnight dreary, while I pondered weak and weary, over many a curious bit of ECMA-script 2017...</p>
<p>Once upon a midnight dreary, while I pondered weak and weary, over many a curious bit of ECMA-script 2017...</p>
<p>Once upon a midnight dreary, while I pondered weak and weary, over many a curious bit of ECMA-script 2017...</p>
<p>Once upon a midnight dreary, while I pondered weak and weary, over many a curious bit of ECMA-script 2017...</p>
<p>Once upon a midnight dreary, while I pondered weak and weary, over many a curious bit of ECMA-script 2017...</p>
<p>Once upon a midnight dreary, while I pondered weak and weary, over many a curious bit of ECMA-script 2017...</p>
<p>Once upon a midnight dreary, while I pondered weak and weary, over many a curious bit of ECMA-script 2017...</p>
<p>Once upon a midnight dreary, while I pondered weak and weary, over many a curious bit of ECMA-script 2017...</p>
<p>Once upon a midnight dreary, while I pondered weak and weary, over many a curious bit of ECMA-script 2017...</p>
<p>Once upon a midnight dreary, while I pondered weak and weary, over many a curious bit of ECMA-script 2017...</p>
<p>Once upon a midnight dreary, while I pondered weak and weary, over many a curious bit of ECMA-script 2017...</p>
<p>Once upon a midnight dreary, while I pondered weak and weary, over many a curious bit of ECMA-script 2017...</p>
<p>Once upon a midnight dreary, while I pondered weak and weary, over many a curious bit of ECMA-script 2017...</p>
<p>Once upon a midnight dreary, while I pondered weak and weary, over many a curious bit of ECMA-script 2017...</p>
<p>Once upon a midnight dreary, while I pondered weak and weary, over many a curious bit of ECMA-script 2017...</p>
<p>Once upon a midnight dreary, while I pondered weak and weary, over many a curious bit of ECMA-script 2017...</p>
<p>Once upon a midnight dreary, while I pondered weak and weary, over many a curious bit of ECMA-script 2017...</p>
<p>Once upon a midnight dreary, while I pondered weak and weary, over many a curious bit of ECMA-script 2017...</p>
<p>Once upon a midnight dreary, while I pondered weak and weary, over many a curious bit of ECMA-script 2017...</p>
<p>Once upon a midnight dreary, while I pondered weak and weary, over many a curious bit of ECMA-script 2017...</p>
<p>Once upon a midnight dreary, while I pondered weak and weary, over many a curious bit of ECMA-script 2017...</p>
<p>Once upon a midnight dreary, while I pondered weak and weary, over many a curious bit of ECMA-script 2017...</p>
<p>Once upon a midnight dreary, while I pondered weak and weary, over many a curious bit of ECMA-script 2017...</p>
<p>Once upon a midnight dreary, while I pondered weak and weary, over many a curious bit of ECMA-script 2017...</p>
<p>Once upon a midnight dreary, while I pondered weak and weary, over many a curious bit of ECMA-script 2017...</p>
<p>Once upon a midnight dreary, while I pondered weak and weary, over many a curious bit of ECMA-script 2017...</p>
<p>Once upon a midnight dreary, while I pondered weak and weary, over many a curious bit of ECMA-script 2017...</p>
<p>Once upon a midnight dreary, while I pondered weak and weary, over many a curious bit of ECMA-script 2017...</p>
<p>Once upon a midnight dreary, while I pondered weak and weary, over many a curious bit of ECMA-script 2017...</p>
<p>Once upon a midnight dreary, while I pondered weak and weary, over many a curious bit of ECMA-script 2017...</p>
<p>Once upon a midnight dreary, while I pondered weak and weary, over many a curious bit of ECMA-script 2017...</p>
<p>Once upon a midnight dreary, while I pondered weak and weary, over many a curious bit of ECMA-script 2017...</p>
<p>Once upon a midnight dreary, while I pondered weak and weary, over many a curious bit of ECMA-script 2017...</p>
<p>Once upon a midnight dreary, while I pondered weak and weary, over many a curious bit of ECMA-script 2017...</p>
<p>Once upon a midnight dreary, while I pondered weak and weary, over many a curious bit of ECMA-script 2017...</p>