vinay vinay - 4 years ago 64
CSS Question

How to increase width and height to loading message?

Problem is : while loading the page we are displaying loading message,in that time
behind the messge anything is noneditable user should not click anything.
but if the page having large data then if i scrolldown the page while loading it is are editable and user is able to click. how to apply loading to entire screen. I want full screen as noneditable without disabling scroll for that reason i need set hieght,width as full screen is there any code?
please let me know is there any problem in my code:

<script type="text/JavaScript">
function hideLoadingDIV1() {
document.getElementById('LoadingDIV').style.display = 'none';
}
</script>

<body onload="hideLoadingDIV1();">
<div class="container loader1" id="LoadingDIV">
<div class="loader1-inner">
<button class="btn btn-lg btn-warning"><span class="glyphicon glyphicon-refresh glyphicon-refresh-animate"></span>&nbsp;Loading Please wait...</button>
</div>
</div>
</body>

Answer Source

You should use position:fixed; in combination with top:0;bottom:0;left:0;right:0;. It will create a "blocking" layer that covers the whole screen, scroll will still be enabled, but the blocking layer will catch all clicks on the screen...

Notice in the demo, that the scroll is still enabled:

#overlay {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: rgba(0,0,0,0.7);
}
<button>I'm a button, click me if you can!</button>
<br />
<button>I'm a button, click me if you can!</button>
<br />
<button>I'm a button, click me if you can!</button>
<br />
<button>I'm a button, click me if you can!</button>
<br />
<button>I'm a button, click me if you can!</button>
<br />
<button>I'm a button, click me if you can!</button>
<br />
<button>I'm a button, click me if you can!</button>
<br />
<button>I'm a button, click me if you can!</button>
<br />
<button>I'm a button, click me if you can!</button>
<br />
<button>I'm a button, click me if you can!</button>
<br />
<button>I'm a button, click me if you can!</button>
<br />
<button>I'm a button, click me if you can!</button>
<br />
<button>I'm a button, click me if you can!</button>
<br />
<button>I'm a button, click me if you can!</button>
<br />
<button>I'm a button, click me if you can!</button>
<br />
<button>I'm a button, click me if you can!</button>
<br />
<button>I'm a button, click me if you can!</button>
<br />
<button>I'm a button, click me if you can!</button>
<br />
<button>I'm a button, click me if you can!</button>
<br />
<button>I'm a button, click me if you can!</button>
<br />
<button>I'm a button, click me if you can!</button>
<br />
<button>I'm a button, click me if you can!</button>
<br />
<button>I'm a button, click me if you can!</button>
<br />
<button>I'm a button, click me if you can!</button>
<br />
<button>I'm a button, click me if you can!</button>
<br />
<button>I'm a button, click me if you can!</button>
<br /><button>I'm a button, click me if you can!</button>
<br />
<button>I'm a button, click me if you can!</button>
<br />
<button>I'm a button, click me if you can!</button>
<br />
<button>I'm a button, click me if you can!</button>
<br />
<button>I'm a button, click me if you can!</button>
<br />
<button>I'm a button, click me if you can!</button>
<br />
<button>I'm a button, click me if you can!</button>
<br />
<button>I'm a button, click me if you can!</button>
<br />
<button>I'm a button, click me if you can!</button>
<br />
<button>I'm a button, click me if you can!</button>
<br />
<button>I'm a button, click me if you can!</button>
<br />
<button>I'm a button, click me if you can!</button>
<br />
<button>I'm a button, click me if you can!</button>
<br />
<div id="overlay"></div>

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download