Question

我使用了React-spinners，但是在加载程序工作时并未禁用后台问题。

试图通过CSS实现这一点，所以我添加了：

.parentDisable{
    position: fixed;
    top: 0;
    left: 0;
    background: #666;
    opacity: 0.8;
    z-index: 998;
    height: 100%;
    width: 100%;
}

并从装载机上使用它：

.centered {
  position: absolute; /* or fixed */
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

import { css } from '@emotion/core';

const override = css`
    display: block;
    margin: 0 auto;
    border-color: red;
`;

<div className='sweet-loading centered parentDisable'>
    <PropagateLoader
        css={override}
        sizeUnit={"px"}
        size={25}
        // color={'#123abc'}
        color={'#0062ff'}
        loading={this.state.loading}
    />
</div>

但是我面临一些问题：

1）微调器不再对齐以居中...位于左上角

2）微调器停止后，叠加背景仍保留在屏幕上

我通过以下方法解决了第二个问题：

 <div /*className='sweet-loading centered parentDisable'*/ className={this.state.loading ? 'parentDisable' : ''}>

Answer 1

如果有人需要我的解决方案：

 <div className={this.state.loading ? 'parentDisable' : ''} width="100%">
                        <div className='overlay-box'>
                            <PropagateLoader
                                // css={override}
                                sizeUnit={"px"}
                                size={25}
                                color={'white'}
                                loading={this.state.loading}
                            />
                        </div>
                    </div>

CSS＃

.parentDisable{
  position: fixed;
  top: 0;
  left: 0;
  background: #666;
  opacity: 0.8;
  z-index: 998;
  height: 100%;
  width: 100%;
}

.overlay-box {
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%, -50%);
  color: white; background: #666666; opacity: .8;
  z-index: 1000;
}

在微调器/加载器运行时禁用背景

1 个答案: