How to Print Bootstrap Modal Exactly as the Display?

Question

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 !

What do you want get printed? just model block or whole page? — Nitin Dhomse, Nov 13 '17 at 09:57
just the model block but with its css, as exactly the border, etc. without the rest of the page behind it. @NitinDhomse — David Awe, Nov 13 '17 at 09:59
you need specify the style of printing on @media print mood , chrom browser has print mood that you can view the style of printing — moath naji, Nov 13 '17 at 10:01
can you explain in a code to help me understand ? @moathnaji — David Awe, Nov 13 '17 at 10:03

score 0 · Accepted Answer · edited Aug 16 '21 at 15:04

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 be applied only in print mode, so to test the style and be sure the design deals with needs, you can use print mode in Chrome Browser.

For more information, check this answer.

How to Print Bootstrap Modal Exactly as the Display?

1 Answers1

Linked