React Toastify：如何通过onOpen/onClose回调禁用模糊背景并锁定交互

核心思路 #

通过React状态控制全屏遮罩层的显示，结合React Toastify的onOpen和onClose回调实现：

• 弹窗打开时：显示遮罩层（添加模糊效果、阻断页面交互），同时给body设置样式禁止滚动
• 弹窗关闭时：隐藏遮罩层，恢复页面的滚动和交互能力

完整实现代码 #

import { useState } from 'react';
import { ToastContainer, toast } from 'react-toastify';
import 'react-toastify/dist/ReactToastify.css';

const App = () => {
  const [isToastActive, setIsToastActive] = useState(false);

  const handleToastOpen = () => {
    setIsToastActive(true);
    // 锁定页面滚动
    document.body.style.overflow = 'hidden';
  };

  const handleToastClose = () => {
    setIsToastActive(false);
    // 恢复页面滚动
    document.body.style.overflow = 'auto';
  };

  const showToast = () => {
    toast('这是一个锁定背景的Toast弹窗', {
      onOpen: handleToastOpen,
      onClose: handleToastClose,
      // 根据需求配置Toast：比如关闭自动关闭、禁止点击关闭、禁止拖拽
      autoClose: false,
      closeOnClick: false,
      draggable: false,
    });
  };

  return (
    <div className="app-container">
      <button onClick={showToast}>触发锁定背景的Toast</button>
      
      {/* 全屏遮罩层 */}
      {isToastActive && (
        <div className="toast-overlay"></div>
      )}

      <ToastContainer 
        position="top-center"
        // 确保Toast层级高于遮罩层
        style={{ zIndex: 9999 }}
      />
    </div>
  );
};

export default App;

配套CSS样式 #

.app-container {
  min-height: 100vh;
  padding: 2rem;
}

.toast-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /* 背景模糊效果 */
  backdrop-filter: blur(4px);
  background-color: rgba(0, 0, 0, 0.3);
  /* 阻断遮罩层下方的点击事件 */
  pointer-events: none;
  /* 层级低于Toast，高于页面内容 */
  z-index: 9998;
}

/* 确保Toast自身可交互 */
.Toastify__toast {
  pointer-events: auto;
}

关键细节说明 #

• pointer-events: none：让遮罩层不拦截点击，但因覆盖在页面上方，自然阻断了下方元素的交互；同时给Toast单独设置pointer-events: auto，保证弹窗自身的关闭按钮等交互正常。
• 修改document.body.style.overflow：直接控制页面滚动状态，无需额外包裹容器，简单高效。
• 层级控制：遮罩层z-index设为9998，Toast容器设为9999，确保Toast始终在最上层。

内容的提问来源于stack exchange，提问作者user13656520