wp.media（lightbox）拖拽上传overlay卡住问题求助

我之前也遇到过一模一样的问题！折腾了好一阵子才找到根源，给你分享几个排查和解决的方向：

1. 手动在上传回调中清理Overlay #

默认wp.media的Overlay应该在上传完成或取消后自动隐藏，但自定义页面的初始化逻辑可能漏掉了相关事件绑定。你可以在select或者上传完成的回调里手动隐藏Overlay：

// 假设你的media frame初始化代码如下
const mediaFrame = wp.media({
    title: '选择或上传图片',
    button: { text: '使用这张图片' },
    multiple: false
});

// 监听图片选中事件
mediaFrame.on('select', () => {
    const attachment = mediaFrame.state().get('selection').first().toJSON();
    // 处理你的图片逻辑（比如插入到页面）
    
    // 手动隐藏模态框和背景Overlay
    document.querySelector('.media-modal-backdrop').classList.add('hidden');
    document.querySelector('.media-modal').classList.add('hidden');
    // 如果用jQuery可以简化：$('.media-modal-backdrop, .media-modal').addClass('hidden');
});

2. 确保加载完整的wp.media依赖 #

自定义页面很容易漏掉wp.media的核心依赖脚本，比如wp-util.js，它负责处理很多事件和DOM操作。在你的PHP代码里确保完整加载媒体库依赖：

add_action('admin_enqueue_scripts', function() {
    // 替换成你的自定义页面ID
    if (get_current_screen()->id === 'your-custom-admin-page') {
        wp_enqueue_media();
        // 强制加载wp-util脚本
        wp_enqueue_script('wp-util');
    }
});

3. 检查自定义CSS的干扰 #

有些主题或插件的自定义CSS会覆盖wp.media的默认样式，导致Overlay的hidden类不生效。打开浏览器开发者工具，检查.media-modal-backdrop.hidden和.media-modal.hidden的样式，看看是否有强制的display: block或opacity: 1。如果有，添加优先级更高的CSS修复：

.media-modal-backdrop.hidden,
.media-modal.hidden {
    display: none !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

4. 监听上传完成事件触发关闭 #

如果上面的方法都没效果，可以直接监听上传状态，完成后触发模态框关闭：

// 监听上传状态的完成事件
mediaFrame.state('upload').on('upload:complete', () => {
    // 延迟500ms确保上传和数据处理完成
    setTimeout(() => {
        mediaFrame.close();
    }, 500);
});

这些方法里，我当时是靠手动添加Overlay隐藏的代码解决的，你可以逐个试试，应该能解决问题！

内容的提问来源于stack exchange，提问作者a-coder