How To Insert Div So That Overlay And Modal Cannot Be Clicked Through During Request?

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

Solution 1:

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.

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.

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!

Note that if the z-indexes on the overlay and spinner div were reversed, then you would not be able to click the close button on the spinner -- and the spinner div would appear dim (because of the background/opacity on the overlay)

Demo:

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

<scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script><divid="msg">Spinner!<button>Close</button></div><divid="olay"></div><p>Once upon a midnight dreary, while I pondered weak and weary, over many a curious bit of ECMA-script 2017...</p><divclass="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>

References:

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