diff --git a/src/dialog/RenderDialog.tsx b/src/dialog/RenderDialog.tsx index a69f0c058f..2cbc41aa87 100644 --- a/src/dialog/RenderDialog.tsx +++ b/src/dialog/RenderDialog.tsx @@ -53,9 +53,11 @@ const RenderDialog: React.FC = (props) => { const bodyCssTextRef = useRef(document.body.style.cssText); const isModal = mode === 'modal'; const canDraggable = props.draggable && mode === 'modeless'; + const dialogOpenClass = `${prefixCls}__open`; useLayoutEffect(() => { if (visible) { + console.log('visible', visible); if (isModal && bodyOverflow.current !== 'hidden' && preventScrollThrough) { const scrollWidth = window.innerWidth - document.body.offsetWidth; // 减少回流 @@ -77,9 +79,12 @@ const RenderDialog: React.FC = (props) => { wrap.current.focus(); } } else if (isModal) { - document.body.style.cssText = bodyCssTextRef.current; + const openDialogDom = document.querySelectorAll(`.${dialogOpenClass}`); + if (openDialogDom.length < 1) { + document.body.style.cssText = bodyCssTextRef.current; + } } - }, [preventScrollThrough, getContainer, visible, mode, isModal]); + }, [preventScrollThrough, getContainer, visible, mode, isModal, dialogOpenClass]); useEffect(() => { if (visible) { @@ -97,7 +102,10 @@ const RenderDialog: React.FC = (props) => { } if (isModal && preventScrollThrough) { // 还原body的滚动条 - isModal && (document.body.style.overflow = bodyOverflow.current); + const openDialogDom = document.querySelectorAll(`.${dialogOpenClass}`); + if (isModal && openDialogDom.length < 1) { + document.body.style.overflow = bodyOverflow.current; + } } if (!isModal) { const { style } = dialog.current; @@ -260,7 +268,12 @@ const RenderDialog: React.FC = (props) => { }; const dialogBody = renderDialog(`${props.placement ? `${prefixCls}--${props.placement}` : ''}`); - const wrapClass = classnames(props.className, `${prefixCls}__ctx`, `${prefixCls}__ctx--fixed`); + const wrapClass = classnames( + props.className, + `${prefixCls}__ctx`, + `${prefixCls}__ctx--fixed`, + visible ? dialogOpenClass : '', + ); const dialog = (
{mode === 'modal' && renderMask()}