如何插入div，以便在请求期间无法单击覆盖和模式? [英] How to insert div so that overlay and modal cannot be clicked through during request?

问题描述

我有一个叠加层和模式，可以在使用Ajax进行长时间请求时显示微调框.当显示覆盖和模式时，即使它们位于覆盖下方，用户仍可以单击当前页面上的任何链接或按钮，从而创建对其他页面的新请求.这没什么大不了的，大多数用户可能不会这样做，但是我想在模式或叠加层之间添加div或其他内容，以防止用户在处理请求时单击按钮或链接.我试过了，但是没有用.关于如何实现这一目标的任何想法?这是html:

I have a overlay and modal that displays a spinner during long requests using Ajax. When the overlay and modal are displayed the user is still able to click on any links or buttons that are on the current page even though they are underneath the overlay, and thereby create a new request to a different page. This isn't a big deal, and most users probably won't do that, but I would like to add a div or something in between the modal or overlay to prevent the user from clicking buttons or links while the request is processing. I tried it, but it didn't work. Any ideas on how to achieve this? Here is the 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;
}

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

If you need additional info please let me know.

推荐答案

如果有一个z-index将您的叠加层提升到下面的元素上方，则用户无法单击其下方的任何内容.

If there is a z-index that raises your overlay above the elements below, then it is not possible for a user to click anything underneath.

在下面的演示中，单击我"按钮(和诗歌文字)的默认z-index值为零.全屏叠加层位于z索引1处，旋转器位于z索引2处.

In the below demo, the Click Me button (and the poetic text) are at the default z-index value of zero. The full-screen overlay is at z-index 1 and the spinner is at z-index 2.

因此，当覆盖层占据了全屏(top:0;left:0;width:99vw;height:99vh)，并且(通过z-index)位于单击我"按钮上方时，整个浏览器窗口均被有效阻止，并且该覆盖层div以下的任何内容都无法单击. 尝试一下！

So, with the overlay taking up the full screen (top:0;left:0;width:99vw;height:99vh), and (via z-index) sitting above the click me button, the entire browser window is effectively blocked and nothing below that overlay div can be clicked. Try it!

请注意，如果叠加层和微调器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，以便在请求期间无法单击覆盖和模式?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！