[英]React-responsive-modal: Change background-color when modal is open
我使用react-responsive-modal在我的反应应用程序中打开一些模态。 当我打开模态时,有一个叠加效果使模态后面的背景变暗。 有没有办法使背景变暗 100% 或为背景设置任何颜色,这样我就看不到打开模态之前存在的东西,直到我再次关闭模态?
我在我的MainComponent
为模态ModalComponent
创建了一个新组件,当我单击按钮时会呈现它:
ModalComponent
:
render() {
return (
<div className="childDiv">
<Modal
open={open}
onClose={this.onCloseModal}
center
classNames={{
transitionEnter: styles.transitionEnter,
transitionEnterActive: styles.transitionEnterActive,
transitionExit: styles.transitionExitActive,
transitionExitActive: styles.transitionExitActive
}}
animationDuration={1000}
>
...
主要组件:
<div>
<div className="outter" onClick={this.openModal.bind(this)}>
//Open Modal when clicking on this div
<p className="arrival">Ankunft am Ziel: ~ {this.props.arrival} Uhr</p>
<p className="price">max. {this.props.price} €</p>
{this.state.open && (
<BookingModalNew
open={this.state.open}
triggerCloseModal={this.closeModal.bind(this)}
destination={this.props.destination}
arrival={this.props.arrival}
price={this.props.price}
/>
)}
//Whole Stuff should not be visible while Modal is opened
只需将一个带有overlay
样式的对象分配给一个变量,例如渲染中的bg
,然后只需使用styles
道具在您的模态中引用该对象,如下所示:
render() {
const bg = {
overlay: {
background: "#FFFF00"
}
};
return (
<div className="childDiv">
<Modal open={open} onClose={this.onCloseModal} center styles={bg} }}>
<p>Your Modal Content</p>
</Modal>
</div>
)
}
但是等等。 当我们可以像这样直接编写样式时,为什么还要创建一个额外的对象:
<Modal open={open} onClose={this.onCloseModal} center styles={background: "#FFFF00"}>
<p>Your Modal Content</p>
</Modal>
即使上面的方法看起来与我的代码做同样的事情,也不会起作用,这是因为您不能直接在react-responsive-modal
上指定内联样式。 您需要先将样式放置在一个对象中,然后将styles
属性引用到该对象。
但是,您可以通过执行以下操作在styles
道具本身中创建对象:
<Modal open={open} onClose={this.onCloseModal} center styles={{ overlay: { background: "#FFFF00" } }}>
<p>Your Modal Content</p>
</Modal>
但是建议您在外部定义对象,然后在styles
属性内部引用它,如上所示。
你可以通过Modal的styles props改变overlay的CSS
<Modal animationDuration={1000} styles={{ modal: {}, overlay: { background: "#ccc" } }} closeIconSize={16} open={modalOpen} onClose={this.onCloseModal} center >
Your Code Here...
</Modal>
您需要定位并覆盖overlay
类,例如
<Modal style={{ overlay: { background: 'black' } }} />
文档中显示了另一种方法,例如
<Modal classNames={{ overlay: { background: 'black' } }} />
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.