Print Contents of a Modal Popup

Twitter Bootstrap: Print content of modal window

Another solution

Here is a new solution based on Bennett McElwee answer in the same question as mentioned below.

Tested with IE 9 & 10, Opera 12.01, Google Chrome 22 and Firefox 15.0.

jsFiddle example

1.) Add this CSS to your site:

@media screen {
  #printSection {
      display: none;
  }
}

@media print {
  body * {
    visibility:hidden;
  }
  #printSection, #printSection * {
    visibility:visible;
  }
  #printSection {
    position:absolute;
    left:0;
    top:0;
  }
}

2.) Add my JavaScript function

function printElement(elem, append, delimiter) {
    var domClone = elem.cloneNode(true);

    var $printSection = document.getElementById("printSection");

    if (!$printSection) {
        $printSection = document.createElement("div");
        $printSection.id = "printSection";
        document.body.appendChild($printSection);
    }

    if (append !== true) {
        $printSection.innerHTML = "";
    }

    else if (append === true) {
        if (typeof (delimiter) === "string") {
            $printSection.innerHTML += delimiter;
        }
        else if (typeof (delimiter) === "object") {
            $printSection.appendChild(delimiter);
        }
    }

    $printSection.appendChild(domClone);
}

You're ready to print any element on your site!

Just call printElement() with your element(s) and execute window.print() when you're finished.

Note:
If you want to modify the content before it is printed (and only in the print version), checkout this example (provided by waspina in the comments): http://jsfiddle.net/95ezN/121/

One could also use CSS in order to show the additional content in the print version (and only there).

Former solution

I think, you have to hide all other parts of the site via CSS.

It would be the best, to move all non-printable content into a separate DIV:

<body>
  <div class="non-printable">
    <!-- ... -->
  </div>

  <div class="printable">
    <!-- Modal dialog comes here -->
  </div>
</body>

And then in your CSS:

.printable { display: none; }

@media print
{
    .non-printable { display: none; }
    .printable { display: block; }
}

Credits go to Greg who has already answered a similar question: Print <div id="printarea"></div> only?

There is one problem in using JavaScript: the user cannot see a preview - at least in Internet Explorer!

printing Bootstrap modal data

Print Bootstrap Modal Body with jQuery

Make a print function that removes everything. Then append the modal body to the main content after printing your data and append everything back where it belongs. It may not be a perfect solution if you have a more significant site, although this should be enough to figure out how to implement this in your situation.

$(document).on("click", ".print", function () {
  const section = $("section");
  const modalBody = $(".modal-body").detach();

  const content = $(".content").detach();
  section.append(modalBody);
  window.print();
  section.empty();
  section.append(content);
  $(".modal-body-wrapper").append(modalBody);
});

.modal-body-wrapper {  // Make sure that you have a wrapper.
  overflow-y: scroll;  // It allows scrolling, but the body is printed
  height: 60vh;        // in full.
}

See Demo : https://jsfiddle.net/hexzero/5Lzocqpn/

Print Content Of Bootstrap Modal Window

<button id="btnPrint"type="button" class="btn btn-default">Print</button>

Simply add onclick="window.print()" in your button tag and remove rest of script.

Please let me know if it works.

How do I print the entire bootstrap modal where content in modal body is scrolled out of view

Download printThis.js from the following link and include it in your html: https://github.com/jasonday/printThis/blob/0a7f799693af8a8303bf0b8df0efc80c2694af81/printThis.js

Wrap the content you want to print with the following div. Everything outside of this div will not be printed.

<div id="modalDiv">
    ..content to print..
</div>

Call the following jquery to print all the content including the content that is not viewable. You may include your css files in an array if you have multiple css files.

$("#modalDiv").printThis({ 
    debug: false,              
    importCSS: true,             
    importStyle: true,         
    printContainer: true,       
    loadCSS: "../css/style.css", 
    pageTitle: "My Modal",             
    removeInline: false,        
    printDelay: 333,            
    header: null,             
    formValues: true          
});

Print only the contents of modal in Angular

No need the js code to clone and all its just a css change in the code

onPrint() {
      window.print();    
    }

For hiding the header, footer and other stuff that are beyond the scope of the component has to written in global css file i.e. in style.css

/*  
move from component level css to style.css
Here hiding is not required as the same is been displayed on screen

@media screen {
  #printable {
      display: none;
  }
} */

@media print {
  body * {
    visibility:hidden;
  }
  #printable, #printable * {
    visibility:visible;
  }
  #printable {
    position:absolute;
    left:0;
    top:0;
  }
}

Print contents of a modal popup

You could add a 'noprint' class name to a div wrapping everything you do not wish to print.

If you also want the main page to be printable without the dialog you can add class name to the wrapper DIV when the user presses the PRINT button and remove the class name after.

@media print {
.noprint {
 display:none
}
}

How to print out the content inside modal in PHP using code igniter fromework

You can try something like the following:

<style type="text/css">
@media print {
  .modal_content_body {
    position: absolute;
    z-index: 999999;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;/* or set some fixed value like: 1200px;*/
  }
}
</style>

Here width & height are set 100% to hide the other contents on the page.
If your content are to be compact, so that the contents do not get widened in full width, you can apply the width-height property on the parent component of the modal contents's holder component.

If you use media print feature to show the modal content only and hide everything else(like body or main wrapper) in the page, it might not work based on your html structure.
For example - you are showing the modal content, hiding the body/wrapper - but the modal content itself inside the body/wrapper container. Here as the parent is hidden, so is the child(modal content).

In that case you need to place the modal's html outside the wrapper - and go for hiding the wrapper and showing the modal content.

For example:

<body>
  <div class="wrapper">
    ...
  </div>
  <div class="modal">
    ...
  </div>
</body>

<style type="text/css">
@media print {
  .wrapper {dosplay:none;}
}
</style>

But the following wont work:

<body>
  <div class="wrapper">
    ...
    <div class="modal">
      ...
    </div>
  </div>
</body>

<style type="text/css">
@media print {
  .wrapper {dosplay:none;}
  .modal {dosplay:block;}
}
</style>

How to Print Bootstrap Modal Exactly as the Display?

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.