From e54737f839c324b58f57450d9b9f7073d82e7972 Mon Sep 17 00:00:00 2001 From: Wei Zhu Date: Tue, 15 Mar 2016 22:32:40 +0800 Subject: [PATCH 1/3] Move dialog inside to mask --- src/DOMWrap.jsx | 2 +- src/Dialog.jsx | 10 ++++++---- 2 files changed, 7 insertions(+), 5 deletions(-) diff --git a/src/DOMWrap.jsx b/src/DOMWrap.jsx index b1f2b3ad..c71cfb05 100644 --- a/src/DOMWrap.jsx +++ b/src/DOMWrap.jsx @@ -18,7 +18,7 @@ const DOMWrap = React.createClass({ props.className += ' ' + props.hiddenClassName; } const Tag = props.tag; - return ; + return {props.children}; }, }); diff --git a/src/Dialog.jsx b/src/Dialog.jsx index 83cf46be..40d7eb15 100644 --- a/src/Dialog.jsx +++ b/src/Dialog.jsx @@ -207,7 +207,7 @@ const Dialog = React.createClass({ ); }, - getMaskElement() { + getMaskElement(dialog) { const props = this.props; const maskProps = { onClick: this.onMaskClick, @@ -221,8 +221,10 @@ const Dialog = React.createClass({ const maskTransition = this.getMaskTransitionName(); maskElement = (); + visible={props.visible} + hiddenClassName={`${props.prefixCls}-mask-hidden`}> + {dialog} + ); if (maskTransition) { maskElement = ( - {[this.getMaskElement(), this.getDialogElement()]} + {this.getMaskElement(this.getDialogElement())} ); }, }); From ee5ec67f917c22d22990fefe0dce93ae028de693 Mon Sep 17 00:00:00 2001 From: Wei Zhu Date: Tue, 15 Mar 2016 22:55:41 +0800 Subject: [PATCH 2/3] Only close dialog when click on mask --- src/Dialog.jsx | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) diff --git a/src/Dialog.jsx b/src/Dialog.jsx index 40d7eb15..68398652 100644 --- a/src/Dialog.jsx +++ b/src/Dialog.jsx @@ -89,10 +89,12 @@ const Dialog = React.createClass({ }, onMaskClick(e) { - if (this.props.closable && this.props.maskClosable) { - this.close(e); + if (e.target === e.currentTarget) { + if (this.props.closable && this.props.maskClosable) { + this.close(e); + } + ReactDOM.findDOMNode(this.refs.dialog).focus(); } - ReactDOM.findDOMNode(this.refs.dialog).focus(); }, onKeyDown(e) { From 594d90e6ee98a3dcd045940599184c659445b4c2 Mon Sep 17 00:00:00 2001 From: Wei Zhu Date: Tue, 15 Mar 2016 23:30:08 +0800 Subject: [PATCH 3/3] Disable body scroll when dialog is open --- assets/bootstrap.less | 3 ++- assets/bootstrap/Mask.less | 3 ++- assets/bootstrap/body.less | 3 +++ assets/index.less | 3 ++- assets/index/Mask.less | 1 + assets/index/body.less | 5 +++++ src/Dialog.jsx | 15 +++++++++++++++ 7 files changed, 30 insertions(+), 3 deletions(-) create mode 100644 assets/bootstrap/body.less create mode 100644 assets/index/body.less diff --git a/assets/bootstrap.less b/assets/bootstrap.less index 5a3f66e4..a11f4875 100644 --- a/assets/bootstrap.less +++ b/assets/bootstrap.less @@ -1,2 +1,3 @@ +@import "./bootstrap/body.less"; @import "./bootstrap/Dialog.less"; -@import "./bootstrap/Mask.less"; \ No newline at end of file +@import "./bootstrap/Mask.less"; diff --git a/assets/bootstrap/Mask.less b/assets/bootstrap/Mask.less index 42575623..43623805 100644 --- a/assets/bootstrap/Mask.less +++ b/assets/bootstrap/Mask.less @@ -9,4 +9,5 @@ opacity: .5; z-index: 1000; filter: alpha(opacity=50); -} \ No newline at end of file + overflow: auto; +} diff --git a/assets/bootstrap/body.less b/assets/bootstrap/body.less new file mode 100644 index 00000000..68d03515 --- /dev/null +++ b/assets/bootstrap/body.less @@ -0,0 +1,3 @@ +.rc-dialog-scrolling { + overflow: hidden; +} diff --git a/assets/index.less b/assets/index.less index b4df613d..3209c973 100644 --- a/assets/index.less +++ b/assets/index.less @@ -1,4 +1,5 @@ @prefixCls: rc-dialog; +@import "./index/body.less"; @import "./index/Dialog.less"; -@import "./index/Mask.less"; \ No newline at end of file +@import "./index/Mask.less"; diff --git a/assets/index/Mask.less b/assets/index/Mask.less index 1ca6e065..9e7b5956 100644 --- a/assets/index/Mask.less +++ b/assets/index/Mask.less @@ -10,6 +10,7 @@ height: 100%; z-index: 1000; filter: alpha(opacity=50); + overflow: auto; &-hidden { display: none; diff --git a/assets/index/body.less b/assets/index/body.less new file mode 100644 index 00000000..1f43ca43 --- /dev/null +++ b/assets/index/body.less @@ -0,0 +1,5 @@ +.@{prefixCls} { + &-scrolling { + overflow: hidden; + } +} diff --git a/src/Dialog.jsx b/src/Dialog.jsx index 68398652..a18762c2 100644 --- a/src/Dialog.jsx +++ b/src/Dialog.jsx @@ -70,6 +70,7 @@ const Dialog = React.createClass({ // first show if (!prevProps.visible) { this.lastOutSideFocusNode = document.activeElement; + this.addScrollingClass(); ReactDOM.findDOMNode(this.refs.dialog).focus(); } } else if (prevProps.visible) { @@ -80,6 +81,7 @@ const Dialog = React.createClass({ this.lastOutSideFocusNode = null; } this.lastOutSideFocusNode = null; + this.removeScrollingClass(); } } }, @@ -260,6 +262,19 @@ const Dialog = React.createClass({ return this.refs[part]; }, + addScrollingClass() { + const props = this.props; + const scrollingClassName = `${props.prefixCls}-scrolling`; + document.body.className += ` ${scrollingClassName}`; + }, + + removeScrollingClass() { + const props = this.props; + const scrollingClassName = `${props.prefixCls}-scrolling`; + const body = document.body; + body.className = body.className.replace(scrollingClassName, ''); + }, + close(e) { this.props.onClose(e); },