Question

我正在React中创建一个Pop Up，但也许某些div的位置不正确。我需要以固定的宽度和高度将弹出窗口居中放置，但是阴影背景不起作用。请帮助我

<div className={style.container}>
        <div className={style.bg}>
          <div className={style.popup}>
            <div className={style.popup_inner}>
              <div className={style.center}>
              <h5 className={style.textStyle}>Save changes to channel?</h5>
              <h5 className={style.textStyle}>‘Sapyens Night’</h5>

              <hr className={style.line} />
              <p>
                If you confirm changes will be automatically presented<br/>
                to to all users.<br/>
                If you change audio source, small audio disruption 
                might<br/>
                occur.
              </p>
             <div className={style.buttons}> <button className={style.back} 
                onClick={this.props.closePopup}>
                Back
              </button>
               <button className={style.goLive}>Save</button></div>
              </div>
            </div>
          </div>
        </div>
    </div>

   .popup {
    position: fixed;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);

  }
  .popup_inner {
    position: absolute;
    width: 433px;
    height: 342px;
    border-radius: 20px;
    background: white;
    border: 1px solid #502f7e;
  }

  .bg{
    position: relative;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
  }

Answer 1

尝试这样做

 .bg{
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
 }

弹出背景阴影CSS

1 个答案: