diff --git a/src/Modal.js b/src/Modal.js
index feaaa8ca31..70b5945bab 100644
--- a/src/Modal.js
+++ b/src/Modal.js
@@ -449,7 +449,7 @@ const Modal = React.createClass({
{this.props.children}
);
// I can't think of another way to not break back compat while defaulting container
- if ( show != null ){
+ if ( !this.props.__isUsedInModalTrigger && show != null ){
return (
{ show && modal }
diff --git a/src/ModalTrigger.js b/src/ModalTrigger.js
index 1bfde9325b..e1087dc384 100644
--- a/src/ModalTrigger.js
+++ b/src/ModalTrigger.js
@@ -4,6 +4,7 @@ import deprecationWarning from './utils/deprecationWarning';
import createChainedFunction from './utils/createChainedFunction';
import createContextWrapper from './utils/createContextWrapper';
+import { OverlayMixin } from './OverlayMixin';
function createHideDepreciationWrapper(hide){
return function(...args){
@@ -16,6 +17,8 @@ function createHideDepreciationWrapper(hide){
const ModalTrigger = React.createClass({
+ mixins: [ OverlayMixin ],
+
propTypes: {
modal: React.PropTypes.node.isRequired,
/**
@@ -28,6 +31,7 @@ const ModalTrigger = React.createClass({
onMouseOver: React.PropTypes.func
},
+
getInitialState() {
return {
isOverlayShown: false
@@ -52,31 +56,19 @@ const ModalTrigger = React.createClass({
});
},
- componentDidMount(){
- this._overlay = document.createElement('div');
- React.render(this.getOverlay(), this._overlay);
- },
-
- componentWillUnmount() {
- React.unmountComponentAtNode(this._overlay);
- this._overlay = null;
- clearTimeout(this._hoverDelay);
- },
-
- componentDidUpdate(){
- React.render(this.getOverlay(), this._overlay);
- },
-
- getOverlay() {
+ renderOverlay() {
let modal = this.props.modal;
+ if (!this.state.isOverlayShown) {
+ return ;
+ }
+
return cloneElement(
modal,
{
- show: this.state.isOverlayShown,
onHide: this.hide,
onRequestHide: createHideDepreciationWrapper(this.hide),
- container: modal.props.container || this.props.container
+ __isUsedInModalTrigger: true
}
);
},