如何在反应模态中将关闭按钮放在模态 window 之外？

Question

我已经从 react-modal 导入了 Modal（React Player 仅用于嵌入视频），我的代码现在看起来是这样的：

<Modal
    isOpen={modalIsOpen}
    onRequestClose={closeModal}
    style={customStyles}
    contentLabel='Example Modal'
  >
    <button onClick={closeModal} className={css.button}>close</button>
    <ReactPlayer
      url='https://vimeo.com/49384334'
      playing='true'
      controls='true'
      volume={0}
    />
  </Modal>

所以我尝试为这样的按钮编写一些样式，但是按钮不能离开它的父标签。

.button {
   display: block;
   float: right;
   position: relative;
   top: -10px;
   right: -10px;
   z-index: 1002;
 }

是否有任何我应该在模式中覆盖的样式 div？

Answer 1

确保正确设置样式。像这样的基本实现应该可以工作

const modalStyles = {
  position: "relative"
};
const buttonStyles = {
  position: "absolute",
  top: "10px",
  right: "10px"
};

<Modal
  isOpen={this.state.isOpen}
  onRequestClose={this.handleOpenModal}
  style={modalStyles}
  contentLabel="Example Modal"
>
  <button onClick={this.handleOpenModal} style={buttonStyles}>
    close
  </button>
  modal content
</Modal>

Answer 2

默认情况下，来自 react-modal 的 Modal 组件有 溢出：auto。这就是为什么您的按钮不能移出模式的原因。要解决此问题，您需要将 overflow: auto 更改为 overflow: visible（请参见下面的代码）

const modalStyles = {
    content : {
      top                   : '50%',
      left                  : '50%',
      right                 : 'auto',
      bottom                : 'auto',
      marginRight           : '-50%',
      transform             : 'translate(-50%, -50%)',
      overflow              : 'visibile'
    }
  };
const buttonStyles = {
  position: "absolute",
  top: "10px",
  right: "10px"
};

<Modal
  isOpen={this.state.isOpen}
  onRequestClose={this.handleOpenModal}
  style={modalStyles}
  contentLabel="Example Modal"
>
  <button onClick={this.handleOpenModal} style={buttonStyles}>
    close
  </button>
  modal content
</Modal>

谢谢。

如何在反应模态中将关闭按钮放在模态 window 之外？

How can I place close button outside of modal window in react-modal?

javascript

css

reactjs

react-modal