Print contents of a modal popup

Question

I have an application that shows a list of items.

The user can click on an item and see its details in a modal popup (centered DIV, shown using JavaScript). I need t

Answer 1

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
}
}

Answer 2

Try this

function PrintContent() {

var DocumentContainer = document.getElementById('nameofDiv');
var WindowObject = window.open("", "PrintWindow",
"width=750,height=650,top=50,left=50,toolbars=no,scrollbars=yes,status=no,resizable=yes");
WindowObject.document.write();
WindowObject.document.write('<link rel="stylesheet" type="text/css" href="path-to-my-stylesheet.css">')
WindowObject.document.writeln(DocumentContainer.innerHTML);
WindowObject.document.close();
WindowObject.focus();
WindowObject.print();
WindowObject.close();
}

This will print out the contents in another window using your stylesheets

Answer 3

You could redirect to a printable page that has the content of the modal popup. Make sure that page has window.print() in the load event. Once your user reaches that page, you could just flag that.

What would happen if the user gets there and cancel the print?

Answer 4

To render the popup contents with a different style (e.g. not centered, 100% width) I dynamically update the position of the _foregroundElement (the PopupControlID) and _backgroundElement (created by the popup extender) on print.

var basePrint = window.print;
window.print = function() {
  var popup = $find( '<%= [PopupExtenderID].ClientID %>' );
  popup._backgroundElement.style.position = 'static';
  popup._foregroundElement.style.position = 'static';
  popup._layout();
  basePrint();
  // Restore settings for display
  popup._backgroundElement.style.position = 'fixed';
  popup._foregroundElement.style.position = 'fixed';
  popup._layout();
  }

Note: Won't work with browser's print button.