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将您的叠加层提升到下面的元素上方，则用户无法单击其下方的任何内容。

在下面的演示中，“单击我”按钮（和诗歌文字）的默认z-index值为零。全屏叠加层位于z-index 1，旋转器位于z-index 2。

因此，重叠式广告占据了全屏（top:0;left:0;width:99vw;height:99vh，并且（通过z-index）位于“点击我”按钮上方，整个浏览器窗口均被有效阻止，并且重叠式广告div之下的任何内容都无法被屏蔽点击。 尝试一下！

请注意，如果叠加层和微调器div上的z索引被反转，则您将无法单击微调器上的关闭按钮-且微调器div会显得暗淡（因为背景/ opacity）

演示：

$('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/

如何插入div，以便在请求期间无法单击覆盖和模式？

1 个答案: