私は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で上書きする必要のあるスタイルはありますか？
デフォルトでは、react-modalのモーダルコンポーネントにオーバーフローがあります：auto。そのため、ボタンはモーダルの外側に移動できません。これを修正するには、オーバーフローを変更する必要があります：自動からオーバーフロー：表示（以下のコードを参照）
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>
ありがとうございました。
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加