[英]react-modal Dynamic Sizing
我正在使用非常棒的react-modal 。 是否可以动态调整它的大小(可能使用 css 媒体标签)。 例如,
看看为您准备的代码。
ReactModal.setAppElement('#main');
class ExampleApp extends React.Component {
constructor () {
super();
this.state = {
showModal: false
};
this.handleOpenModal = this.handleOpenModal.bind(this);
this.handleCloseModal = this.handleCloseModal.bind(this);
}
handleOpenModal () {
this.setState({ showModal: true });
}
handleCloseModal () {
this.setState({ showModal: false });
}
render () {
return (
<div>
<button onClick={this.handleOpenModal}>Trigger Modal</button>
<ReactModal
isOpen={this.state.showModal}
contentLabel="onRequestClose Example"
onRequestClose={this.handleCloseModal}
className="Modal"
overlayClassName="Overlay"
>
<p>Modal text!</p>
<button onClick={this.handleCloseModal}>Close Modal</button>
</ReactModal>
</div>
);
}
}
const props = {};
ReactDOM.render(<ExampleApp {...props} />, document.getElementById('main'))
在响应式视图中结帐:
https://codepen.io/ene_salinas/full/yRGMpG/
结帐完整代码:
https://codepen.io/ene_salinas/pen/yRGMpG
Yellow color = large screen
Green color = medium screen
Gray color = Mobile
不要忘记这个元:
"<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">"
快乐的编码。
我也在我的一个项目中使用该库,在那里我提出了以下模式的样式规则:
.ReactModal__Overlay {
z-index: 99;
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
background-color: rgba(255,255,255,0.75);
}
.ReactModal__Content {
position: absolute;
left: 2.5rem;
right: 2.5rem;
top: 2.5rem;
bottom: 2.5rem;
background-color: #fff;
box-shadow: 0 0 10px 0 rgba(0,0,97,0.5);
overflow: auto;
border-radius: 4px;
outline: none;
}
为了获得理想的结果,您需要调整绝对定位,因此:
1. large screen, modal max-width 200px
@media screen and (min-width: 900px) {
max-width: 200px;
left: calc(50% - 100px);
}
2. medium screen, modal about 80% screen width
@media screen and (min-width: 475px) and (max-width: 900px) {
left: 10%;
right: 10%;
top: 10%;
bottom: 10%;
}
3. mobile screen, modal full width
@media screen and (max-width: 475px) {
left: 0;
right: 0;
top: 0;
bottom: 0;
}
由于IE
支持,最好不要使用calc
。
..ReactModal__Overlay {
position: fixed;
left: 0;
right: 0;
top: 0;
bottom: 0;
background-color: rgba(0,0,0,0.7);
z-index: 999;
}
// this is better to use transform for center the modal and width
.ReactModal__Content {
position: absolute; // if it's inside your ReactModal__Overlay if not use Fixed and a higher z-index.
width: 100%;
height: 100%;
left: 50%;
top: 50%;
overflow: auto;
background-color: #fff;
-webkit-transform: translate(-50,-50%);
transform: translate(-50,-50%);
}
@media screen and (min-width: 992px) { // desktop
.modal.modal-content {
max-width: 200px;
max-height: 80%;
}
}
@media screen and (min-width: 426px) and (max-width: 991) { // tablet size
.modal.modal-content {
max-width: 80%;
max-height: 80%;
}
}
@media screen and (max-width: 425px) { // mobile size
.modal.modal-content {
max-width: 100%;
max-height: 100%;
}
}
I couldn't find a solution how to make the React Modal <<"react-modal": "^3.14.4">> height dynamic, ie depending on the content, and forcedly used the global class to be set by default
.ReactModal__Content--after-open {
width: 1000px !important;
top: 50% !important;
left: 50% !important;
transform: translate(-50%, -50%) !important;
min-height: max-content !important;
overflow: hidden !important;
}
class Modal extends React.Component { state = { showModal: false }; handleOpenModal = () => { this.setState({ showModal: true }); }; handleCloseModal = () => { this.setState({ showModal: false }); }; componentDidMount() { ReactModal.setAppElement('#root'); } render() { return ( <div> <button onClick={this.handleOpenModal}>Trigger Modal</button> <ReactModal isOpen={this.state.showModal} className="Modal" overlayClassName="Overlay" > <p>Here goes your content!</p> <button onClick={this.handleCloseModal}>Close Modal</button> </ReactModal> </div> ); } } const rootElement = document.getElementById("root"); ReactDOM.render(<Modal />, rootElement);
.Modal { height: 100%; width: 100%; background-color: #ffffff; overflow: auto; } .Overlay { position: fixed; top: 0; bottom: 0; right: 0; left: 0; display: flex; justify-content: center; align-items: center; background-color: rgba(0, 0, 0, 0.4); } @media (min-width: 768px) and (max-width: 1279px) { .Modal { width: 80%; height: 80%; } } @media (min-width: 1280px) { .Modal { height: auto; width: auto; max-width: 500px; max-height: 80%; } }
<div id="root" /> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-modal/3.6.1/react-modal.min.js"></script>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.