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

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元素的所有静止子元素都不应该。