React-отзывчивый-модальный: изменить цвет фона, когда модальный открыт - PullRequest
Новая
       13

React-отзывчивый-модальный: изменить цвет фона, когда модальный открыт

0 голосов
/ 07 января 2019

Я использую реагирующий-модальный открыть некоторые модальные моды в моем приложении реакции. Когда я открываю модал, появляется эффект наложения, который затемняет фон за модалом. Есть ли способ затемнить фон на 100% или установить какой-либо цвет для фона, чтобы я не мог видеть материал, который был там до открытия модала, пока я снова не закрыл модал?

Я создал новый компонент для модального ModalComponent внутри моего 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}
    >
   ...

MainComponent: 

<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

Ответы [ 3 ]

0 голосов
/ 07 января 2019

Вам нужно нацелиться и перезаписать класс overlay, например,

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

Другой способ сделать это показан в документации здесь , например

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

0 голосов
/ 09 апреля 2019

Вы можете изменить CSS оверлея с помощью стилей реквизита Modal 

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

See

Пожалуйста, смотрите полную документацию по реагирующим-модальным здесь

0 голосов
/ 07 января 2019

Просто присвойте объект со своими стилями для 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 реквизита, как показано выше.

...