Javascript 如何将关闭按钮放置在react Mode模式的模式窗口外？

我已经从react-Modal（react播放器仅用于emdebing视频）导入了Modal，现在我的代码看起来是这样的：

<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>

---

模态div中是否有我应该覆盖的样式？

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

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

关闭
模态内容

默认情况下，react model中的model组件有溢出：auto。这就是为什么您的按钮不能在模式外移动。要解决此问题，您需要将溢出：自动更改为溢出：可见（请参见下面的代码）

const modalStyles={
内容：{
前50%，
左：50%，
右图：“自动”，
底部：“自动”，
利润率：'-50%'，
转换：“转换（-50%，-50%）”，
溢出：“可见”
}
};
常量按钮样式={
位置：“绝对”，
顶部：“10px”，
右：“10px”
};
关闭
模态内容

---

谢谢。

模态应该有一个位置：相对属性，因此绝对不能离开模态。您需要重写此属性。是的，这起作用了，问题出在溢出属性中。我给按钮添加了更多的样式，所以它现在是我最初想要的。谢谢

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>

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>