diff --git a/components/modal/confirm.jsx b/components/modal/confirm.jsx
index 495a85936..2371ad7a7 100644
--- a/components/modal/confirm.jsx
+++ b/components/modal/confirm.jsx
@@ -30,6 +30,7 @@ export default function confirm(config) {
props.iconType = props.iconType || 'question-circle';
let width = props.width || 416;
+ let style = props.style || {};
// 默认为 true,保持向下兼容
if (!('okCancel' in props)) {
@@ -124,16 +125,20 @@ export default function confirm(config) {
[props.className]: !!props.className,
});
- ReactDOM.render(, div, function () {
+ ReactDOM.render(
+
+ , div, function () {
d = this;
});
}
diff --git a/components/modal/demo/position.md b/components/modal/demo/position.md
new file mode 100644
index 000000000..fd906a190
--- /dev/null
+++ b/components/modal/demo/position.md
@@ -0,0 +1,46 @@
+---
+order: 7
+title: 自定义位置
+---
+
+`1.0` 之后,Modal 的 `align` 属性被移除,您可以直接使用 `style.top` 或配合其他样式来设置对话框位置。
+
+````jsx
+import { Modal, Button } from 'antd';
+
+const App = React.createClass({
+ getInitialState() {
+ return { visible: false };
+ },
+ setModalVisible(visible) {
+ this.setState({ visible });
+ },
+ render() {
+ return (
+
+
+
this.setModalVisible(false)}
+ onCancel={() => this.setModalVisible(false)}>
+ 对话框的内容
+ 对话框的内容
+ 对话框的内容
+
+
+ );
+ },
+});
+
+ReactDOM.render(, mountNode);
+````
+
+````css
+/* 使用 css 技巧来动态设置的对话框位置 */
+.vertical-center-modal .ant-modal-content {
+ transform: translateY(-50%);
+}
+````
diff --git a/components/modal/index.md b/components/modal/index.md
index 51a8c2419..32a0eb561 100644
--- a/components/modal/index.md
+++ b/components/modal/index.md
@@ -30,6 +30,7 @@ english: Modal
| okText | 确认按钮文字 | String | 确定 |
| cancelText | 取消按钮文字 | String | 取消 |
| maskClosable | 点击蒙层是否允许关闭 | Boolean | true |
+| style | 可用于设置浮层的样式,调整浮层位置等 | Object | - |
### Modal.xxx()
diff --git a/components/modal/style/modal.less b/components/modal/style/modal.less
index 56289894f..29b1a0fb9 100644
--- a/components/modal/style/modal.less
+++ b/components/modal/style/modal.less
@@ -3,7 +3,8 @@
.@{dialog-prefix-cls} {
position: relative;
width: auto;
- margin: 10px;
+ margin: 0 auto;
+ top: 100px;
&-wrap {
position: fixed;
@@ -120,9 +121,3 @@
}
}
}
-
-@media (min-width: 768px) {
- .@{dialog-prefix-cls} {
- margin: 100px auto;
- }
-}