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( -
{body} {footer}
-
, div, function () { + ReactDOM.render( + +
{body} {footer}
+
+ , 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; - } -}