显示弹出窗口时在模式弹出窗口中打印内容,但隐藏模式弹出窗口时打印正文

我使用下面的CSS使模式弹出窗口可打印,但有一个问题。问题是,由于CSS被添加到页面中,因此只有模态弹出窗口是可打印的,而其他页面内容是不可打印的。

我想要的是,当模态弹出窗口可见(由单击按钮触发)时,只有模态内容可以打印,但当模态不可见时,只有页面内容可以打印。

@media print {
    body * { visibility: hidden; }
    #search-result, #search-result * { visibility: visible; }
    #search-result{ position: absolute; left: 0px; top: 0px; }
}

使现代化

谢谢你的提示!这是我所做的。

css格式

.print { visibility: visible; }
.no-print { visibility: hidden; }

js文件

$('#search-result').on('hidden.bs.modal', function (e) {
    $('body').addClass('print').removeClass('no-print');
    $('#search-result').addClass('no-print').removeClass('print');
});

$('#search-result').on('shown.bs.modal', function (e) {
    $('body').addClass('no-print').removeClass('print');
    $('#search-result').addClass('print').removeClass('no-print');
});