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类对于身体中不是弹出窗口的每个子元素。当您关闭弹出窗口进行反向操作时，只有弹出窗口应该有no-print类，并且body元素的所有休息子元素都应该显示。

显示弹出窗口时以模态弹出窗口打印内容，但如果隐藏模态弹出窗口则打印主体

1 个答案: