Mozilla Firefox打印预览异常：模态框显示在待打印div下方如何解决

现有代码 #

<div class="maindiv"></div>
<div class="printablediv"></div>

function printData()
{
    $('#ProductIdModal').modal('hide');
    $(".maindiv").css('display','none');
    $(".Printablediv").css('display','block');
    $('.modal-backdrop').remove();
    window.print();
}

window.addEventListener("afterprint", myFunction);
function myFunction() {
    $(".maindiv").css('display','block');
    $(".Printablediv").css('display','none');
}

问题原因 #

该兼容问题由Chrome和Firefox的DOM更新执行时机差异导致：调用modal('hide')后Bootstrap模态框有默认的消失过渡动画，Chrome会等DOM更新完成后再执行后续打印逻辑，Firefox会直接执行后续代码，还没等模态框完全隐藏就触发了打印，所以预览会残留模态框。

解决方案 #

更推荐使用方案2，不需要修改现有业务逻辑，兼容性覆盖更广，也不会受JS执行顺序、动画时长的影响。

• 方案1：监听模态框完全隐藏的事件，把打印逻辑放到回调中执行，保证模态框完全消失后再打印

function printData() {
    // 先监听模态框完全隐藏的事件，仅触发一次
    $('#ProductIdModal').one('hidden.bs.modal', function () {
        $(".maindiv").css('display','none');
        $(".Printablediv").css('display','block');
        $('.modal-backdrop').remove();
        window.print();
    })
    // 再触发模态框隐藏
    $('#ProductIdModal').modal('hide');
}

• 方案2：新增打印专用CSS媒体查询，从样式层面直接禁止打印时显示模态框、遮罩层和非打印区域，完全规避JS执行时机问题

@media print {
    #ProductIdModal, .modal-backdrop, .maindiv {
        display: none !important;
    }
    .printablediv {
        display: block !important;
    }
}

添加上述CSS后无需修改原有JS代码即可同时兼容Chrome和Firefox。

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