3

我使用react-responsive-modal 在我的反应应用程序中打开一些模式。当我打开模态时，有一个叠加效果使模态后面的背景变暗。有什么方法可以将背景变暗 100% 或为背景设置任何颜色，这样在我再次关闭模态之前，我无法看到在打开模态之前存在的东西？

ModalComponent我在我的 modal 中创建了一个新组件，MainComponent当我单击按钮时会呈现该组件：

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} €&lt;/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
4

3 回答 3

11

只需将一个具有您的样式的对象分配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>

但是建议你在外面定义对象，然后在stylesprop里面引用它，如上图。

于 2019-01-07T00:49:29.717 回答
3

您可以通过 Modal 的样式属性更改叠加层的 CSS

<Modal animationDuration={1000} styles={{ modal: {}, overlay: { background: "#ccc" } }} closeIconSize={16} open={modalOpen} onClose={this.onCloseModal} center > 
    Your Code Here...
</Modal>

看

请在此处查看 react-responsive-modal 的完整文档

于 2019-04-09T07:35:25.443 回答
1

您需要定位并覆盖overlay该类，例如

<Modal style={{ overlay: { background: 'black' } }} />

文档中显示了另一种方法，例如

<Modal classNames={{ overlay: { background: 'black' } }} />

于 2019-01-07T01:12:28.323 回答