diff --git a/src/modules/Modal/Modal.js b/src/modules/Modal/Modal.js index 19745eabed..b665a35daf 100644 --- a/src/modules/Modal/Modal.js +++ b/src/modules/Modal/Modal.js @@ -195,21 +195,8 @@ class Modal extends Component { handlePortalMount = (e) => { debug('handlePortalMount()') - const { dimmer } = this.props - const mountNode = this.getMountNode() - - if (dimmer) { - debug('adding dimmer') - mountNode.classList.add('dimmable') - mountNode.classList.add('dimmed') - - if (dimmer === 'blurring') { - debug('adding blurred dimmer') - mountNode.classList.add('blurring') - } - } - this.setPosition() + this.setPositionAndClassNames() const { onMount } = this.props if (onMount) onMount(e, this.props) @@ -237,11 +224,26 @@ class Modal extends Component { handleRef = c => (this.ref = c) - setPosition = () => { + setPositionAndClassNames = () => { + if (this.ref) { + const { dimmer } = this.props const mountNode = this.getMountNode() const { height } = this.ref.getBoundingClientRect() + if (dimmer) { + mountNode.classList.add('dimmable') + mountNode.classList.add('dimmed') + + if (dimmer === 'blurring') { + mountNode.classList.add('blurring') + } + } else { + mountNode.classList.add('dimmable') + mountNode.classList.add('dimmed') + mountNode.classList.add('blurring') + } + const marginTop = -Math.round(height / 2) const scrolling = height >= window.innerHeight @@ -264,7 +266,7 @@ class Modal extends Component { if (Object.keys(newState).length > 0) this.setState(newState) } - this.animationRequestId = requestAnimationFrame(this.setPosition) + this.animationRequestId = requestAnimationFrame(this.setPositionAndClassNames) } renderContent = (rest) => {