javascript - 显示弹出窗口时在模式弹出窗口中打印内容，但如果隐藏模式弹出窗口则打印正文

Question

我正在使用以下 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');
});

Answer 1

也许使用一个类来隐藏您不想打印的页面部分会更容易。

使用这种CSS规则

@media print {
  .no-print {
    visiblity: hidden;
  }
}

显示模态弹出窗口的按钮的事件处理程序可能会添加 no-print对不是弹出窗口本身的页面的每个元素进行分类。您可能希望将整个页面包装在一个 div 中以使其更容易，并且弹出窗口应该在此包装之外。

当弹出窗口关闭时，您会调用 no-print将类添加到模态弹出窗口并将其从页面的其余部分删除。

如果您认为将整个页面包装在一个 div 中只是为了这样做太过分了，请将模态弹出窗口作为 body 元素的子元素，当您只想打印弹出窗口时，添加 no-print对不是弹出窗口的 body 的每个子元素进行分类。当您关闭弹出窗口时进行反向操作，只有弹出窗口应该有 no-print类，并且 body 元素的所有其余子元素都不应该。