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 to have a button on that popup that will allow the user to print out the contents of the modal popup only.

This is for an internal application that needs to work in IE7+ only. When the user clicks the print button on the modal popup the state of the item gets changed to "printed" (for internal business reasons...).

I am using ASP.NET and the ASP.NET AJAX Control Toolkit ModalPopupExtender, but I am guessing that the technique to achieve this will be browser-centric, and server technology agnostic.

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

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 3

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