如何打印Bootstrap模式正好作为显示器？

所以我很难用它的css打印模态。 我想打印出一个完全如屏幕上显示的模态窗口。 我使用了window.print（）命令甚至是javasript / jquery命令。 但css没有附加。 相反，它只打印我的模态一半。

所以，我想要的是，这个模态图像： 模态示例图像

将打印到window.print（），如屏幕上显示的那样。 整个模态块与边框等但没有页面背后。

我试过的代码：

function printElement(elem) { var domClone = elem.cloneNode(true); var $printSection = document.getElementById("printSection"); if (!$printSection) { var $printSection = document.createElement("div"); $printSection.id = "printSection"; document.body.appendChild($printSection); } $printSection.innerHTML = ""; $printSection.appendChild(domClone); window.print(); } 

如果有人会回答这个问题，谢谢！

Answer 1

你可以使用@media print标签

 @media print { model.class { display: none; /* Hidden by default */ position: fixed; /* Stay in place */ z-index: 1; /* Sit on top */ left: 0; top: 0; width: 100%; /* Full width */ height: 100%; /* Full height */ overflow: auto; /* Enable scroll if needed */ background-color: rgb(0,0,0); /* Fallback color */ background-color: rgba(0,0,0,0.4); /* Black w/ opacity */ } // or you can add what ever you want css in print mood 

@media打印标签中的所有css仅适用于打印情绪，因此要测试样式并确保设计处理需求，您可以在Chrom浏览器中使用打印心情检查此答案