如何正确打印Bootstrap模态作为显示？ [英] How to Print Bootstrap Modal Exactly as the Display?

问题描述

所以我很难用它的css打印模式。我想打印出与屏幕上显示的完全一致的模式窗口。我使用了 window.print（）命令，甚至是javasript / jquery。但是CSS没有附加。所以，我想要的是，这个模态图像：
i.stack.imgur.com/SCllb.pngrel =nofollow noreferrer>模态示例图片

将打印到窗口。 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（）; 
 
 $ / code> 

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

$ b $您可以使用@media打印标记

  @ b 
解决方案媒体打印{
 model.class {
 display：none; / *默认隐藏* / 
 position：fixed; / *保持原状* / 
 z-index：1; / *坐在上面* / 
 left：0; 
 top：0; 
宽度：100％; / *全宽* / 
高度：100％; / *全高* / 
溢出：自动; / *如果需要可以滚动* / 
 background-color：rgb（0,0,0）; / *备用颜色* / 
 background-color：rgba（0,0,0,0.4）; / *黑色w /不透明* / 
} //或者你可以添加任何你想要的css打印心情
  

@media print标签中的所有css将仅适用于打印心情，因此为了测试样式并确保设计满足您在Chrom浏览器中使用打印心情的需求，请检查此 answer

so I'm having difficulties to print a modal with it's css. I wanted to print out a modal window exactly as it shown on the screen. I've used the window.print() command or even the javasript / jquery one. but the css is not attached. instead, it prints my modal only half way through.

So, what I wanted is, this modal image : Modal Example Image

Will be printed to window.print() as what it shown on the screen. the whole modal block with the borders etc. but without the page behind it.

codes I've tried :

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();
    }

If anyone would answer this, Thank You !

解决方案

you can use @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 

all the css in the @media print tag will applied only in print mood , so to test the style and be sure design deal with needs you can use print mood in Chrom Browser check this answer

这篇关于如何正确打印Bootstrap模态作为显示？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！