ss-dp/src/views/Home/components/UI/CommonModal/index.js

import React, { useEffect } from 'react';
import ReactDOM from 'react-dom';
import { CloseOutlined } from '@ant-design/icons';
import titleBg from '@/assets/images/modal/title.png';
import './index.less';

const CommonModal = ({ visible, onClose, title, children, width, tabs = [], activeTab, onTabChange, bodyStyle = {} }) => {
  useEffect(() => {
    if (visible) {
      //当弹框打开时，如果不加这行代码，用户滚动鼠标滚轮时，背后的页面（Home 页）也会跟着滚动
      document.body.style.overflow = 'hidden';
    } else {
      document.body.style.overflow = '';
    }
    return () => {
      document.body.style.overflow = '';
    };
  }, [visible]);

  if (!visible) return null;
 //它允许把组件的 UI “传送” 到当前组件树之外的 DOM 节点,当前是传送到document.body，如果不这样做的话CommonModal 写在一个很深的 div 里，且那个 div 有 overflow: hidden 或者复杂的 z-index ，弹框很可能会被截断、遮挡，或者定位异常。
  return ReactDOM.createPortal(
    <div className="common-modal-overlay">
      <div className="common-modal-container" style={width ? { width: width, minWidth: 'auto' } : {}}>
        <div className="modal-header">
          <div className="title-wrapper" style={{ backgroundImage: `url(${titleBg})` }}>
            <span className="title-text">{title}</span>
          </div>
          
          {tabs && tabs.length > 0 && (
            <div className="modal-tabs">
              {tabs.map((tab) => (
                <div
                  key={tab.value}
                  className={`tab-item ${activeTab === tab.value ? 'active' : ''}`}
                  onClick={() => onTabChange && onTabChange(tab.value)}
                >
                  {tab.label}
                </div>
              ))}
            </div>
          )}

          <div className="close-btn" onClick={onClose}>
            <CloseOutlined />
          </div>
        </div>
        <div className="modal-body" style={bodyStyle}>
          {children}
        </div>
      </div>
    </div>,
    document.body
  );
};

export default CommonModal;