Skip to content
Advertisement

How to Print Bootstrap Modal Exactly as the Display?

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 !

Advertisement

Answer

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.

Advertisement