React集成Calendly异常：模态框显示在页面底部而非叠加层

可能原因及修复方案 #

1. 移除脚本清理函数 #

你的useEffect清理逻辑会在组件卸载时删除Calendly脚本，若页面存在路由切换、组件重新挂载的情况，会导致脚本被移除后弹窗样式无法正常初始化。直接去掉清理代码：

useEffect(() => {
    const script = document.createElement('script');
  
    script.src = "https://calendly.com/assets/external/widget.js";
    script.async = true;
  
    document.body.appendChild(script);

    // 删除下方的清理函数
    // return () => {
    //   document.body.removeChild(script);
    // }
}, []);

2. 确保脚本加载完成后再触发弹窗 #

添加脚本加载完成监听，避免在脚本未初始化完成时调用弹窗方法：

useEffect(() => {
    const script = document.createElement('script');
  
    script.src = "https://calendly.com/assets/external/widget.js";
    script.async = true;

    // 监听脚本加载完成状态
    script.onload = () => {
        console.log('Calendly 脚本加载完成');
    };
  
    document.body.appendChild(script);
}, []);

// 重构点击事件，增加Calendly存在性校验
const handleOpenCalendly = () => {
    if (window.Calendly) {
        window.Calendly.initPopupWidget({url: calendymain});
    }
    return false;
};

按钮onClick改为：onClick={handleOpenCalendly}

3. 修复TailwindCSS层级覆盖问题 #

Tailwind的全局z-index配置可能覆盖了Calendly弹窗的层级，在全局CSS文件中添加强制层级：

.calendly-overlay {
    z-index: 9999 !important;
}
.calendly-popup {
    z-index: 10000 !important;
}

4. 改用官方React组件（更稳定） #

官方提供了React专用组件，避免手动加载脚本的兼容性问题：
首先安装依赖：

npm install @calendly/react-widget

然后替换自定义按钮：

import { PopupButton } from '@calendly/react-widget';

// 直接使用官方弹窗按钮
<PopupButton
    url={calendymain}
    text="点击预约"
    className="你的自定义按钮样式类"
/>

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