如何显示微调框或完全在屏幕上加载

Question

从移动背景Im。在Android应用程序中，我们确实展示了一个微调对话框，以避免用户在网络活动时进行交互。我相信我们可以使用CSS来做同样的事情，下面的CSS可以在屏幕上看到旋转器，但是我想在显示旋转器时避免屏幕上的任何用户交互。

.spinner { 
    position: fixed; 
    z-index: 999; 
    height: 5em; 
    width: 5em; 
    overflow: show; 
    margin: auto; 
    top: 0; 
    left: 0; 
    bottom: 0; 
    right: 0; 
} 

任何人都可以请帮助我。

感谢

Answer 1

使用HTML中的布局如下：

<div class="overlay"> 
    <div class="overlay__wrapper"> 
     <div class="overlay__spinner"></div> 
    </div> 
</div> 

对于叠加，将其设置为：

.overlay { 
    position: fixed; 
    top: 0; 
    left: 0; 
    bottom: 0; 
    right: 0; 
    background: rgba(0,0,0,.7); 
} 

里面，有一个包装，这样就可以居中微调。

.overlay__wrapper { 
    width: 100%; 
    height: 100%; 
    position: relative; 
} 

那么对于微调，添加此CSS：

.overlay__spinner { 
    position: absolute; 
    left: 50%; 
    top: 50%; 
    transform: translate(-50%, -50%); 
} 

里面添加.overlay__spinner您的微调代码。这将导致一个半透明的覆盖，其中有一个居中的微调器。