2016-05-05 16:52:36 +08:00
|
|
|
|
---
|
|
|
|
|
order: 7
|
2016-11-15 15:02:30 +08:00
|
|
|
|
title:
|
2016-08-11 11:41:06 +08:00
|
|
|
|
zh-CN: 自定义位置
|
|
|
|
|
en-US: To customize the position of modal
|
2016-05-05 16:52:36 +08:00
|
|
|
|
---
|
|
|
|
|
|
2016-08-11 11:41:06 +08:00
|
|
|
|
## zh-CN
|
|
|
|
|
|
2016-05-05 16:52:36 +08:00
|
|
|
|
`1.0` 之后,Modal 的 `align` 属性被移除,您可以直接使用 `style.top` 或配合其他样式来设置对话框位置。
|
|
|
|
|
|
2016-08-11 11:41:06 +08:00
|
|
|
|
## en-US
|
|
|
|
|
|
|
|
|
|
After release `1.0`, Modal's `align` prop was removed. You can use `style.top` or other styles to
|
|
|
|
|
set position of modal dialog.
|
|
|
|
|
|
2016-05-05 16:52:36 +08:00
|
|
|
|
````jsx
|
|
|
|
|
import { Modal, Button } from 'antd';
|
|
|
|
|
|
|
|
|
|
const App = React.createClass({
|
|
|
|
|
getInitialState() {
|
2016-05-09 16:45:58 +08:00
|
|
|
|
return {
|
|
|
|
|
modal1Visible: false,
|
|
|
|
|
modal2Visible: false,
|
|
|
|
|
};
|
2016-05-05 16:52:36 +08:00
|
|
|
|
},
|
2016-05-09 16:45:58 +08:00
|
|
|
|
setModal1Visible(modal1Visible) {
|
|
|
|
|
this.setState({ modal1Visible });
|
|
|
|
|
},
|
|
|
|
|
setModal2Visible(modal2Visible) {
|
|
|
|
|
this.setState({ modal2Visible });
|
2016-05-05 16:52:36 +08:00
|
|
|
|
},
|
|
|
|
|
render() {
|
|
|
|
|
return (
|
|
|
|
|
<div>
|
2016-08-11 11:41:06 +08:00
|
|
|
|
<Button type="primary" onClick={() => this.setModal1Visible(true)}>Display a modal dialog at 20px to Top</Button>
|
2016-05-09 16:45:58 +08:00
|
|
|
|
<Modal
|
2016-08-11 11:41:06 +08:00
|
|
|
|
title="20px to Top"
|
2016-05-09 16:45:58 +08:00
|
|
|
|
style={{ top: 20 }}
|
|
|
|
|
visible={this.state.modal1Visible}
|
|
|
|
|
onOk={() => this.setModal1Visible(false)}
|
2016-06-06 13:54:10 +08:00
|
|
|
|
onCancel={() => this.setModal1Visible(false)}
|
|
|
|
|
>
|
2016-08-11 11:41:06 +08:00
|
|
|
|
<p>some contents...</p>
|
|
|
|
|
<p>some contents...</p>
|
|
|
|
|
<p>some contents...</p>
|
2016-05-09 16:45:58 +08:00
|
|
|
|
</Modal>
|
2016-08-11 11:47:28 +08:00
|
|
|
|
<br /><br />
|
2016-08-11 11:41:06 +08:00
|
|
|
|
<Button type="primary" onClick={() => this.setModal2Visible(true)}>Vertically centered modal dialog</Button>
|
2016-05-05 16:52:36 +08:00
|
|
|
|
<Modal
|
2016-08-11 11:41:06 +08:00
|
|
|
|
title="Vertically centered modal dialog"
|
2016-05-09 16:45:58 +08:00
|
|
|
|
wrapClassName="vertical-center-modal"
|
|
|
|
|
visible={this.state.modal2Visible}
|
|
|
|
|
onOk={() => this.setModal2Visible(false)}
|
2016-06-06 13:54:10 +08:00
|
|
|
|
onCancel={() => this.setModal2Visible(false)}
|
|
|
|
|
>
|
2016-08-11 11:41:06 +08:00
|
|
|
|
<p>some contents...</p>
|
|
|
|
|
<p>some contents...</p>
|
|
|
|
|
<p>some contents...</p>
|
2016-05-05 16:52:36 +08:00
|
|
|
|
</Modal>
|
|
|
|
|
</div>
|
|
|
|
|
);
|
|
|
|
|
},
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
ReactDOM.render(<App />, mountNode);
|
|
|
|
|
````
|
|
|
|
|
|
|
|
|
|
````css
|
2016-08-11 11:41:06 +08:00
|
|
|
|
/* use css to set position of modal */
|
2016-11-15 15:02:30 +08:00
|
|
|
|
.vertical-center-modal {
|
|
|
|
|
text-align: center;
|
|
|
|
|
white-space: nowrap;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.vertical-center-modal:before {
|
|
|
|
|
content: '';
|
|
|
|
|
display: inline-block;
|
|
|
|
|
height: 100%;
|
|
|
|
|
vertical-align: middle;
|
|
|
|
|
width: 0;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.vertical-center-modal .ant-modal {
|
|
|
|
|
display: inline-block;
|
|
|
|
|
vertical-align: middle;
|
|
|
|
|
top: 0;
|
|
|
|
|
text-align: left;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/*
|
|
|
|
|
// Use flex which not working in IE
|
2016-05-09 16:45:58 +08:00
|
|
|
|
.vertical-center-modal {
|
|
|
|
|
display: flex;
|
|
|
|
|
align-items: center;
|
|
|
|
|
justify-content: center;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.vertical-center-modal .ant-modal {
|
|
|
|
|
top: 0;
|
2016-05-05 16:52:36 +08:00
|
|
|
|
}
|
2016-11-15 15:02:30 +08:00
|
|
|
|
*/
|
2016-05-05 16:52:36 +08:00
|
|
|
|
````
|