javascript - 如何打印与显示完全相同的 Bootstrap 模态？

Question

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

所以，我想要的是这个模态图像: Modal Example Image

将按照屏幕上显示的内容打印到window.print()。整个模态 block 带有边框等，但后面没有页面。

我尝试过的代码:

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 print 标记中的所有 CSS 都将仅在打印模式下应用，因此要测试样式并确保设计满足需求，您可以在 Chrome 浏览器中使用打印模式。

有关更多信息，请查看此 answer .