我正在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);
}
答案 0 :(得分:0)
尝试这样做
.bg{
position: absolute;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
}