support custom Modal position and add vertical middle demo

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(<Dialog
-    className={classString}
-    visible
-    closable={false}
-    title=""
-    transitionName="zoom"
-    footer=""
-    maskTransitionName="fade" width={width}>
-    <div style={{ zoom: 1, overflow: 'hidden' }}>{body} {footer}</div>
-  </Dialog>, div, function () {
+  ReactDOM.render(
+    <Dialog
+      className={classString}
+      visible
+      closable={false}
+      title=""
+      transitionName="zoom"
+      footer=""
+      maskTransitionName="fade"
+      style={style}
+      width={width}>
+      <div style={{ zoom: 1, overflow: 'hidden' }}>{body} {footer}</div>
+    </Dialog>
+  , div, function () {
     d = this;
   });
 }

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 (
+      <div>
+        <Button type="primary" onClick={() => this.setModalVisible(true)}>显示垂直居中的对话框</Button>
+        <Modal
+          title="垂直居中的对话框"
+          className="vertical-center-modal"
+          style={{ top: '50%' }}
+          visible={this.state.visible}
+          onOk={() => this.setModalVisible(false)}
+          onCancel={() => this.setModalVisible(false)}>
+          <p>对话框的内容</p>
+          <p>对话框的内容</p>
+          <p>对话框的内容</p>
+        </Modal>
+      </div>
+    );
+  },
+});
+
+ReactDOM.render(<App />, mountNode);
+````
+
+````css
+/* 使用 css 技巧来动态设置的对话框位置 */
+.vertical-center-modal .ant-modal-content {
+  transform: translateY(-50%);
+}
+````

components/modal/index.md

@@ -30,6 +30,7 @@ english: Modal
 | okText     | 确认按钮文字    | String           | 确定       |
 | cancelText | 取消按钮文字    | String           | 取消       |
 | maskClosable | 点击蒙层是否允许关闭 | Boolean   | true       |
+| style | 可用于设置浮层的样式，调整浮层位置等 | Object   | -       |
 
 ### Modal.xxx()
 

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