如何插入div以便在请求期间无法点击叠加和模态？

Question

我有一个覆盖和模态，在使用Ajax的长请求期间显示一个微调器。当显示叠加和模态时，用户仍然能够点击当前页面上的任何链接或按钮，即使它们位于叠加层下面，从而创建对不同页面的新请求。这不是什么大问题，并且大多数用户可能不会这样做，但我想在模态或叠加之间添加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;
}

如果您需要其他信息，请告诉我。

Answer 1

如果有一个z-index将叠加层提升到下面的元素之上，那么用户就无法点击下面的任何内容。

在下面的演示中，Click Me按钮（和诗歌文本）的默认z-index值为零。全屏叠加在z-index 1处，而微调器在z-index 2处。

因此，当叠加占据全屏（top:0;left:0;width:99vw;height:99vh），并且（通过z-index）位于click me按钮上方时，整个浏览器窗口被有效阻止，并且可以点击该覆盖div下面的任何内容。试试吧！

请注意，如果叠加和微调器div上的z索引相反，那么您将无法单击微调器上的关闭按钮 - 并且微调器div将显示为暗淡（因为叠加层上的背景/不透明度）

演示：

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

.text-center{text-align:center;}

<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>
<div class="text-center"><button>Click Me</button>
<p>Once upon a midnight dreary, while I pondered weak and weary, over many a curious bit of ECMA-script 2017...</p>

参考文献：

https://css-tricks.com/almanac/properties/z/z-index/