Thickbox确实是个老牌的模态框组件，但原生设计就没考虑响应式——它的尺寸是通过JS硬计算固定值，直接写width:auto或者vh单位会被它的内置逻辑覆盖。下面给你两个可行的解决方案，按需选择：

方案1：改造现有Thickbox使其支持响应式 #

我们需要通过自定义JS和CSS，强制覆盖Thickbox的固定尺寸逻辑，让它自适应屏幕：

第一步：添加自定义JS代码 #

把这段代码放到你的插件JS文件里（或者通过wp_enqueue_script注册加载）：

jQuery(document).ready(function($) {
    // 监听Thickbox打开事件，重写尺寸规则
    $(document).on('tb_show', function() {
        // 重置模态框容器的尺寸和定位
        $('#TB_window').css({
            'width': 'auto',
            'height': 'auto',
            'max-width': '90vw',
            'max-height': '90vh',
            'left': '50%',
            'top': '50%',
            'transform': 'translate(-50%, -50%)',
            'margin': '0'
        });
        // 调整内容区域的自适应规则
        $('#TB_ajaxContent').css({
            'width': '100%',
            'height': 'auto',
            'max-height': '80vh',
            'overflow-y': 'auto',
            'padding': '20px'
        });
        // 禁用Thickbox自带的位置计算函数，防止它重置我们的设置
        if (typeof tb_position === 'function') {
            window.tb_position = function() {};
        }
    });

    // 窗口 resize 时重新调整模态框位置
    $(window).on('resize', function() {
        if ($('#TB_window').is(':visible')) {
            $('#TB_window').css({
                'left': '50%',
                'top': '50%',
                'transform': 'translate(-50%, -50%)'
            });
        }
    });
});

第二步：添加自定义CSS样式 #

用wp_enqueue_style把这段CSS加到你的插件里：

#TB_window {
    position: fixed !important;
    box-sizing: border-box !important;
}

#TB_ajaxContent {
    box-sizing: border-box !important;
}

/* 移动端优化 */
@media (max-width: 768px) {
    #TB_window {
        max-width: 95vw !important;
        max-height: 95vh !important;
    }

    #TB_ajaxContent {
        padding: 15px !important;
        font-size: 14px;
    }
}

这样修改后，Thickbox就会自适应不同屏幕尺寸，内容超出时还会自动出现滚动条。

方案2：替换为WordPress原生的响应式模态框（推荐） #

如果不想折腾老组件，WordPress自带了wp-modal组件，原生支持响应式，用法也更现代：

第一步：注册加载原生模态框资源 #

在你的插件PHP文件里添加：

function digisoft_enqueue_modal_assets() {
    wp_enqueue_script('wp-modal');
    wp_enqueue_style('wp-modal');
}
add_action('admin_enqueue_scripts', 'digisoft_enqueue_modal_assets');

第二步：编写模态框HTML #

替换你原来的Thickbox内容：

<div id="digisoft-clicktocall-modal" class="wp-modal" style="display:none;">
    <div class="wp-modal-backdrop"></div>
    <div class="wp-modal-dialog">
        <div class="wp-modal-content">
            <div class="wp-modal-header">
                <h2 class="wp-modal-title">Votre information</h2>
                <button class="wp-modal-close" aria-label="Close modal"></button>
            </div>
            <div class="wp-modal-body">
                <form action="#" method="post">
                    <label for="digisoft_clickToCall_lastnameClient">Votre nom :</label><br>
                    <input id="digisoft_clickToCall_lastnameClient" type="text" name="lastnameClient"><br>
                    <!-- 其他表单元素继续写在这里 -->
                    <button type="submit" style="margin-top:15px;">Envoyer</button>
                </form>
            </div>
        </div>
    </div>
</div>

第三步：添加控制模态框的JS #

jQuery(document).ready(function($) {
    // 假设你的触发按钮ID是open-clicktocall-modal
    $('#open-clicktocall-modal').on('click', function(e) {
        e.preventDefault();
        $('#digisoft-clicktocall-modal').addClass('is-open');
        $('body').addClass('modal-open');
    });

    // 关闭模态框的逻辑
    $('.wp-modal-close, .wp-modal-backdrop').on('click', function() {
        $('#digisoft-clicktocall-modal').removeClass('is-open');
        $('body').removeClass('modal-open');
    });

    // 按ESC键关闭
    $(document).on('keydown', function(e) {
        if (e.key === 'Escape' && $('#digisoft-clicktocall-modal').hasClass('is-open')) {
            $('#digisoft-clicktocall-modal').removeClass('is-open');
            $('body').removeClass('modal-open');
        }
    });
});

这个方案不需要额外处理响应式，wp-modal会自动适配手机、平板和桌面设备，而且和WordPress后台的UI风格更统一。

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