Question

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

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

将按照屏幕上显示的内容打印到 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 tag

@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浏览器中使用打印情绪检查answer

如何正确显示Bootstrap模式？

1 个答案: