Question

问题：在加载页面的同时，我们正在显示加载消息在乱七八糟的后面任何东西都是不可编辑的用户不应该点击任何东西但如果页面有大数据，那么如果我在加载页面时滚动页面是可编辑的，用户可以点击。如何将加载应用到整个屏幕。我希望全屏不可编辑而不禁用滚动因为这个原因我需要设置hieght，宽度为全屏是否有任何代码？请告诉我代码中是否有任何问题：

<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 1

您应该将position:fixed;与top:0;bottom:0;left:0;right:0;结合使用。它将创建一个覆盖整个屏幕的“阻塞”层，仍然会启用滚动，但阻挡层将捕获屏幕上的所有点击...

请注意，在演示中，滚动仍处于启用状态：

#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>

Answer 2

可以通过javascript和css的组合来完成。

请查看下面的演示

jQuery(document).ready(function(){
	jQuery('.loader').show();
});

.loader {
    background: rgba(0, 0, 0, 0.8) none repeat scroll 0 0;
    height: 100%;
    left: 0;
    margin: 0 auto;
    position: fixed;
    right: 0;
    text-align: center;
    width: 100%;
    z-index: 99999;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="loader" style="display:none">
<img src="http://agiledevelopers.in/outnabout/uploads/squares.gif"></div>

如何增加加载消息的宽度和高度？

2 个答案: